Forum Moderators: not2easy
Below is the html document and under it is the external style sheet.
Thanks for you help.
*****HTML Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="learning.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#AF8FC2" background="../zimages/page_background/blacktotransparent.png">
<div id="wrapper">
<!--Header div tag Start -->
<div id="header">
<img src="../zimages/header/weblogo.png" alt="web logo" width="350" height="100" />
</div><!-- header div tag end -->
<!--Buttons div tag Start -->
<div id="buttons">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About </a></li>
</ul>
</div> <!-- Buttons div tag end -->
<!--Left column div tag start -->
<div id="leftcolumn">
<p align="center" class="HL_orange"><b>Block 1</b></p>
<p>ncidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudi</p>
</div><!--Left column div tage end -->
<!--Left column div tag start -->
<div id="leftcolumn">
<p align="center" class="HL_orange"><b>Block 2</b></p>
<p>ncidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudi </p>
</div><!--Left column div tage end -->
<!--Main Content div tag Start -->
<div id="maincontent">
<img src="../zimages/images/fotolia_hat.png" alt="" width="150" class="floatLeft"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
</div>
<!--main content div tag end -->
</body>
</html>
********External CSS file
/*CLASS formating */
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.HL_orange{
color:#666666;
background:#d5b718;
}
img.floatLeft{
float:left;
margin:15px 4px 4px 4px;
}
img.floatRight{
float:right;
margin:4px;
}
/*WRAPPER CSS */
#wrapper{
text-align:auto;
margin:0 auto;
width:780px;
/* Temporary borders Wrapper Red */
border:solid 3px #FFFF00;
}
/*HEADER CSS */
#header{
background-color: #8859a4;
margin:0;
padding:0;
/* Temporary borders Header orange */
border:dashed 1px #00FF00;
}
/*BUTTONS CSS */
#buttons{
background-color: #000000;
margin:0;
padding:0;
height:25px;
/* Temporary borders Header orange */
border:dashed 1px #FFCC00;
}
#buttons ul{
/*color:#00FF66;*/
margin:0;
padding:0;
list-style:none;
float: left;
}
#buttons li{
float: left;
}
#buttons li a:link, #buttons li a:visited{
background:#666666;
padding: .2em, .5em;
display:block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:bold;
color: #d5b718;
text-decoration:none;
line-height: 1.2em;
margin-right:.5em;
}
#buttons li a:hover{
color:#0000FF;
background:#FFFF00;
}
#buttons li a.current, #buttons li a.current:hover, #buttons li a.current:active{
color:#666666;
background:#d5b718;
cursor:default;
}
/*LEFT COLUMN CSS */
#leftcolumn{
/* Temporary borders left column Content magenta */
border:dashed 2px #FF00FF;
float:left;
width:25%;
margin:0;
padding:2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .9em;
font-weight:normal;
color:#000;
background:#FBF7E8;
}
/*MAIN CONTENT CSS */
#maincontent{
/* Temporary borders Main Content Red */
border:dashed 2px #FF0000;
float:right;
width:70%;
margin:0;
padding:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.0em;
font-weight:700;
color:#000;
background:#FBF7E8;
}
[edited by: swa66 at 10:15 pm (utc) on Oct. 12, 2009]
[edit reason] ToS#24 [/edit]
1) Code samples sufficient to replicate the problem only please. A lot of unneeded markup in the sample. Stripping the markup down to the problem will either lead to fixing on your own, or make it more likely that someone will take an interest in helping out.
2) VALIDATE markup - HTML and CSS. A lot of errors.
[w3.org...] The sample below now validates HTML, but CSS warnings remain for not declaring width on floated containers.
3) Easier to shorthand long font: declarations.
{font: bold 1em/1.2em Verdana, Arial, Helvetica, sans-serif;}
Best to be consistent in personal style. You declare {font-weight: bold;} in one place and {font-weight: 700;} in another.
4) Main problem was closing #leftcolumn too early. Also, you used the id twice - NOT allowed.
Make this your textbook;
W3C - HTML 4.01 Guidelines [w3.org]
5) .clearfloat was declared in CSS, but not used in HTML. Needed to bring the wrapper border around all content in IE7 and Opera. Everything inside #wrapper is floated and there is no height to force the wrapper to wrap.
clear: both;
height: 0;
/*font-size: 1px;
line-height: 0;*/
/*****? Overkill in declaration block.*/
}
{height: 0; may or may not be needed. A case can be made for its use; depending.
6) <p align="center" - align is deprecated. Use CSS.
7) The markup below validates as described above, puts your two boxes on the left and the big box on the right, fixes the wrapper issue so that it actually has the ability to wrap, and works in FF, Opera, IE. would strongly recommend continuing to clean-up the markup as you work with this.
8) Always options to choose from. You may be given entirely different suggestions from someone else. Don't be surprised.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="learning.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="all">
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear: both;
height: 0;
/*font-size: 1px;
line-height: 0;*/
/*****? Overkill in declaration block.*/
}
.HL_orange{
color:#666;
background:#d5b718;
}
img.floatLeft{
float:left;
margin:15px 4px 4px 4px;
}
img.floatRight{
float:right;
margin:4px;
}
/*WRAPPER CSS */
#wrapper{
text-align: left;
margin:0 auto;
width:780px;
/* Temporary borders Wrapper Red */
border:solid 3px blue;
}
/*HEADER CSS */
#header{
background-color: #8859a4;
margin:0;
padding:0;
/* Temporary borders Header orange */
border:dashed 1px #0f0;
}
/*BUTTONS CSS */
#buttons{
background-color: #000;
margin:0;
padding:0;
height:25px;
/* Temporary borders Header orange */
border:dashed 1px #fc0;
}
#buttons ul{
/*color:#00FF66;*/
margin:0;
padding:0;
list-style-type: none;
float: left;
}
#buttons li{
float: left;
}
#buttons li a:link, #buttons li a:visited{
background-color: #666;
padding: .2em .5em;
display:block;
font: bold 1em/1.2em Verdana, Arial, Helvetica, sans-serif;
color: #d5b718;
text-decoration:none;
margin-right:.5em;
}
#buttons li a:hover{
color:#00f;
background:#ff0;
}
#buttons li a.current, #buttons li a.current:hover, #buttons li a.current:active{
color:#666;
background:#d5b718;
cursor:default;
}
/*LEFT COLUMN CSS */
#leftcolumn{
/* Temporary borders left column Content magenta */
border: dashed 2px #f0f;
float:left;
width:25%;
margin:0;
padding:2px;
font: normal .9em Verdana, Arial, Helvetica, sans-serif;
color:#000;
background:#fbf7e8;
}
/*MAIN CONTENT CSS */
#maincontent{
/* Temporary borders Main Content Red */
border: .1em solid red;
float:right;
width:70%;
margin:0;
padding:10px;
font: 700 1em Verdana, Arial, Helvetica, sans-serif;
color:#000;
background:#fbf7e8;
}
</style>
</head>
<body style="background: #af8fc2; url(../zimages/page_background/blacktotransparent.png);">
<div id="wrapper">
<!--Header div tag Start -->
<div id="header">
<img src="../zimages/header/weblogo.png" alt="web logo" width="350" height="100" />
</div><!-- header div tag end -->
<!--Buttons div tag Start -->
<div id="buttons">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About </a></li>
</ul>
</div> <!-- Buttons div tag end -->
<!--Left column div tag start -->
<div id="leftcolumn">
<p style="text-align: center;" class="HL_orange"><b>Block 1</b></p>
<p>ncidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudi</p>
<p style="text-align: center" class="HL_orange"><b>Block 2</b></p>
<p>ncidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudi </p>
</div><!--Left column div tage end -->
<!--Main Content div tag Start -->
<div id="maincontent">
<img src="../zimages/images/fotolia_hat.png" alt="" width="150" class="floatLeft"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
</div>
<div class="clearfloat"> </div>
</div>
<!--##########
I am new to the forum. How do you attach files?
What I am trying to do is create one wrapper with 3 boxes inside.
2 box on left side and one big box on right side.
-->
</body>
</html>
[edited by: swa66 at 10:16 pm (utc) on Oct. 12, 2009]
[edit reason] ToS#24 [/edit]
My problem is I need left column box 2 to be under left column box 1. I then need the main content to be on the right of left column box 1 and left column box 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<style type="text/css" media="all">
.HL_orange{
color:#666;
background:#d5b718;
}
img.floatLeft{
float:left;
margin:15px 4px 4px 4px;
}
img.floatRight{
float:right;
margin:4px;
}
/*WRAPPER CSS */
#wrapper{
text-align: left;
margin:0 auto;
width:780px;
/* Temporary borders Wrapper Red */
border:solid 3px blue;
}
/*LEFT COLUMN CSS */
#leftcolumnbox1{
/* Temporary borders left column Content magenta */
border: dashed 2px #f0f;
float:left;
width:25%;
margin:0;
padding:2px;
font: normal .9em Verdana, Arial, Helvetica, sans-serif;
color:#000;
background:#fbf7e8;
}
#leftcolumnbox2{
/* Temporary borders left column Content magenta */
border: dashed 2px #f0f;
float:left;
width:25%;
margin:0;
padding:2px;
font: normal .9em Verdana, Arial, Helvetica, sans-serif;
color:#000;
background:#fbf7e8;
}
/*MAIN CONTENT CSS */
#maincontent{
/* Temporary borders Main Content Red */
border: .1em solid red;
float:right;
width:70%;
margin:0;
padding:10px;
font: 700 1em Verdana, Arial, Helvetica, sans-serif;
color:#000;
background:#fbf7e8;
}
</style>
<div id="wrapper">
<!--Left column 1 top box div tag start -->
<div id="leftcolumnbox1">
<p style="text-align: center;" class="HL_orange"><b>Block 1</b></p>
<p>ncidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudi</p>
</div><!--Left column 1 div tage end -->
<!--Left column 2 top box div tag start -->
<div id="leftcolumnbox2">
<p style="text-align: center;" class="HL_orange"><b>Block 2</b></p>
<p>ncidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudi</p>
</div><!--Left column 2 div tage end -->
<!--Main Content div tag Start -->
<div id="maincontent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
</div> <!--Main Content divLeft column div tage end -->
</div>
</body>
</html>
[edited by: swa66 at 10:17 pm (utc) on Oct. 12, 2009]
[edit reason] ToS#24 [/edit]
Your markup is floating box 1 and box 2 next to each other - NOT stacking them.
.....................
Delete the following:
</div><!--Left column 1 div tage end -->
<!--Left column 2 top box div tag start -->
<div id="leftcolumnbox2">
and the boxes will stack on the left and the large box will be to the right.
.....................
There are several options, but you cannot float containers that you are trying to stack. Well, I suppose that you could, but.....
.....................
As coded, IF you used multiple <div>, THEN you should use class and not id. The following have the exact same declaration block:
#leftcolumnbox1
#leftcolumnbox2
Use .columnbox {.....
and then just reuse .columnbox as necessary. (You don't need to use it twice IMO, but if you did - streamline the CSS by cutting out the extra. Drop the identical id and create a reusable class.
.....................
The HTML did not validate. 6 errors generated because </head>
<body>
were missing.
The question or what I have trying to do is:
Have two boxes on the left on one box on the right. Should look like this:
BOX1 MAIN CONTENT
MAIN CONT(CONT)
BOX2 MAIN CONT(CONT)
MAIN CONT(CONT)
MAIN CONT(CONT)
The above is a very different phrasing than before and it makes a huge difference.
What I am trying to do is create one wrapper with 3 boxes inside.
2 box on left side and one big box on right side.
My problem is I need left column box 2 to be under left column box 1. I then need the main content to be on the right of left column box 1 and left column box 2
There are numerous options to approach the layout with. This is but one. Still not sure what you want really. I have set two containers (top and bottom). The top container has two boxes floated left (Positioning is another option.) The lower box has one floated box and separates main content by section.
I do not feel certain as to how you are defining MAINCONT(CONT). The last description seems clearer, but this my third time through. The markup below gives you two options with one technique. A lot faster to start from scratch. There should be enough information here for you to proceed. If not, you can work another angle.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body {
margin: 0; padding: 0; font-size: 100%;
}
/**********Is wrapper needed?*/
#wrapper {
border: .2em solid red;
background-color: #000;
}
.content-box {
border: .2em dashed #fff;
background-color: #ccc;
margin-bottom: .1em;
}
.left-box {
float: left;
border: .2em dotted blue;
background-color: #faebd7;
width: 25%;
margin-right: 1em;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="content-box">
<div class="left-box">
<p>
ncidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudi
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget,
tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id,
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget,
tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id,
</p>
<div class="left-box">
<p>
ncidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudi
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id,
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget,
tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id,
</p>
</div>
<div class="content-box">
<div class="left-box">
<p>
ncidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudi
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget,
tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id,
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget,
tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id,
</p>
</div>
</div>
<!--##########
The question or what I have trying to do is:
Have two boxes on the left on one box on the right. Should look like this:
BOX1 MAIN CONTENT
MAIN CONT(CONT)
BOX2 MAIN CONT(CONT)
MAIN CONT(CONT)
MAIN CONT(CONT)
-->
</body>
</html>
[edited by: swa66 at 2:27 pm (utc) on Oct. 10, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]
BOX1 MAIN CONTENT
MAIN CONT(CONT)
BOX2 MAIN CONT(CONT)
MAIN CONT(CONT)
MAIN CONT(CONT)
You have MAIN(CONT) flowing all around those two boxes, and I provided a sample that does that. The .jpg did not show that at all - another variance between question asked and question intended. There is a lesson there.
I have retained the .jpg link as a <!--##########Comment-->
Last shot. I will markup something that nearly exactly matches that image.
After that, I recommend a higher level of study and work before giving up. Your responses are bouncing back too quickly to have put in a lot of work, and learning is a lot of work. This statement concerned me as well: When I posted the reply the forum program reformatted my text. Made me wonder if you are really getting your hands dirty, or just plugging my comments and markup into some WYSIWYG editor. You won't learn much (anything) doing that, IMO. Happy to help you learn. Even happy to do the work and provide the exact answer if I think that you will study it. If I am no more than fixing your website for free - I already do enough pro bono work to get to get a free pass to heaven.
I will be happy to help further, if you have worked the markup, run into additional problems; and pose clear questions, and provide-reasonable-sample of issue.
[edited by: swa66 at 10:26 pm (utc) on Oct. 12, 2009]
[edit reason] ToS#24 [/edit]
NOTE: Used IE conditional comment for IE7 and up. You will need to test it in 8 and see if it is needed. If not, emend. If you support 6, then you will need to see if hack works for 6 and above, or if a separate statement is needed specifically for 6.
NOTE: In order to clearly identify all of the blocks, I set up a number of global border: classes and called as needed. This was done to keep the other declarations neater. I do often use similar global declarations and use them as part of the stylesheet 'library'.
NOTE: Most commonly, I will not declare background-image: for any id or class, but use my library so that I can reuse a declaration, but give it an entirely separate background-image: by bringing in that declaration from another class. If you lock yourself into a background-image: it can cause unnecessary hassle or code bloat.
NOTE: This is but one option. Others may look at the rendering and offer completely different (quite possibly superior) markup that yields identical rendering.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body {
margin: 0 0 10em 0; padding: 0; font-size: 100%;
}
#wrapper {
margin: 2em 3% 0 3%;
}
.float-box-left {
float: left;
width: 25%;
}
.float-box-left p {
margin: 1em .6em;
}
.border-a {
border: .2em solid red;
}
.border-b {
border: .2em solid blue;
}
.border-c {
border: .2em solid teal;
}
.border-d {
border: .2em solid #000;
}
.main-content {
float: right;
width: 72%;
margin: 1em .6em;
}
/**********Probably should be replaced, but replicates example.*/
.main-content p, .float-box-left p {
padding-right: .7em;
}
/**********This extends the wrapper around the floated content. Otherwise the border has no height in FF and Opera*/
.clear-div-for-wrapper {
clear: both;
}
</style>
<!--########## Hack for IE to put margin-top: between <p>. Only tested in 7, but you should test in 8. I just assume that 8 will be a problem as well. If not, change the conditional to 7 only. If you still support 6, then you will need to change the statement, or perhaps add a statemment specific to 6. -->
<!--[if gte IE 7]>
<style type="text/css" media="all">
.float-box-left p {
display: inline-block;
</style>
}
<! [end if]-->
</head>
<body>
<div id="wrapper" class="border-a">
<div class="float-box-left">
<p class="border-b">
ncidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudi
<!--##########Line breaks replicate what is possibly padding-bottom:-->
<br /><br />
</p>
<p class="border-c">
ncidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudi
<br /><br />
</p>
</div>
<div class="main-content border-d">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget,
tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id,
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo
porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget,
tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id,
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodoporttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget,
tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id,
</p>
</div>
<div class="clear-div-for-wrapper">
</div>
</div>
<!--##########
I am prepared to make sacrifices, but not compromises.
-->
</body>
</html>
[edited by: swa66 at 10:27 pm (utc) on Oct. 12, 2009]
[edit reason] clean up [/edit]
Before I answer each of your paragraphs, I want to you to know that my frustration is not taken out against you. Matter of fact you have been a great help. More than what a person can ask for through a forum. The only reason I am still at this forum is because of you. You have put in way to much work on something so simple. I am frustrated because if I could have posted a picture with my original post this whole ordeal would have been avoided.
Showing me a .jpg of what you want is easily coded - but you don't learn anything, so it's not worth my work.
That all depends on the individual person. Once it is in code format, it is up to the individual to read and evaluate the code. I agree some just want free code other are trying to learn. As a student who is currently taking a Dreamweaver with CSS class my goal here is to learn something that is not in our book. The idea of the two boxes is because I want to show the instructor something different that I went out and learned on my own.
I saw the referenced .jpg before the link was chopped. It did NOT match my understanding of even the last description that you gave.
BOX1 MAIN CONTENT
MAIN CONT(CONT)
BOX2 MAIN CONT(CONT)
MAIN CONT(CONT)
MAIN CONT(CONT)You have MAIN(CONT) flowing all around those two boxes, and I provided a sample that does that. The .jpg did not show that at all - another variance between question asked and question intended. There is a lesson there.
Last shot. I will markup something that nearly exactly matches that image.
Thank you. I have viewed it and that was exactly what I was trying to do. As I write this I have not had time to look over the code to figure out what you did, but I will as soon as I am done here.
that, I recommend a higher level of study and work before giving up.
Your responses are bouncing back too quickly to have put in a lot of work, and learning is a lot of work.
Made me wonder if you are really getting your hands dirty, or just plugging my comments and markup into some WYSIWYG editor.
You won't learn much (anything) doing that, IMO. Happy to help you learn. Even happy to do the work and provide the exact answer if I think that you will study it. If I am no more than fixing your website for free - I already do enough pro bono work to get to get a free pass to heaven.
I will be happy to help further, if you have worked the markup, run into additional problems; and pose clear questions, and provide-reasonable-sample of issue
****POST 2 CONTINUED*****
NOTE: Used IE conditional comment for IE7 and up. You will need to test it in 8 and see if it is needed. If not, emend. If you support 6, then you will need to see if hack works for 6 and above, or if a separate statement is needed specifically for 6
Yes, I understand the different results you get in IE6 vs IE7 vs IE8 vs Firefox. As someone beginning and is learning CSS you learn quickly about these issues.
NOTE: In order to clearly identify all of the blocks, I set up a number of global border: classes and called as needed. This was done to keep the other declarations neater. I do often use similar global declarations and use them as part of the stylesheet 'library'.
NOTE: Most commonly, I will not declare background-image: for any id or class, but use my library so that I can reuse a declaration, but give it an entirely separate background-image: by bringing in that declaration from another class. If you lock yourself into a background-image: it can cause unnecessary hassle or code bloat
NOTE: This is but one option. Others may look at the rendering and offer completely different (quite possibly superior) markup that yields identical rendering.
The code you posted was exactly what I was trying to do. Now I need to go figure out what you did. Once again, thank you for all you time and help!
[edited by: swa66 at 10:45 pm (utc) on Oct. 12, 2009]
[edit reason] clean up [/edit]
2) You have put in way to much work on something so simple.
This is what I do, so not that much work.
5) That all depends on the individual person. Once it is in code format, it is up to the individual to read and evaluate the code.
Me too, truth be told. It is much easier for me to study a known answer, deconstruct, and then come back with better and more advanced questions.
6) I want to show the instructor something different that I went out and learned on my own.
Good for you. I would suggest that most impressive is to take an image or screenshot, and then markup HTML and CSS from scratch. Hand-coding a replica from nothing (even a simple layout) demonstrates an understanding and mastery.
7)
BOX1 MAIN CONTENT
MAIN CONT(CONT)
BOX2 MAIN CONT(CONT)
MAIN CONT(CONT)
MAIN CONT(CONT)</i>
<i> You have MAIN(CONT) flowing all around those two boxes, and I provided a sample that does that. The .jpg did not show that at allActually, this is not what I posted.
It was not what you intended, but it is what you posted - thus, it is what I worked with.
8) If I cannot explain it, my teacher will not accept it either. Therefore, I need to be able to not only explain it, but also expand on it.
Excellent answer.
PS: Unable to leave it alone - Google is your friend. Every answer to every question is out there if you know how to construct the search strings.
If you see a site with a layout structure that you like, download the page and all linked files. Then strip it down to the skeleton and study the what, how, and why of construction.
[edited by: swa66 at 10:48 pm (utc) on Oct. 12, 2009]
[edit reason] clean up [/edit]
