...

View Full Version : CSS acting funny - this should be easy



niemie
02-22-2005, 09:19 PM
I am basically trying to create a wrapper that is centered on a page, and within that frame have 2 columns, the left hand side being the smaller in width of the two, and the right hand side being the wider main content column. My code below seems to work in IE but not in Firefox (and PS Dreamweaver sucks at displaying CSS stuff).

MY CSS:

#wrapper {
margin:0 auto;
width:820px;
text-align: left;
}

#leftcontent {
float:left;
width:30%;
background:#fff;
margin-right:20px;
padding-bottom:20px;
text-align:center;
}

#rightcontent {
width:70%;
background:#fff;
margin-left: 20px;
padding-bottom:20px;
}

MY HTML:

<div id="wrapper">
<div id="leftcontent">Filler Text</div>
<div id="rightcontent">Filler Text...................................</div>
</div>

_Aerospace_Eng_
02-22-2005, 09:54 PM
you gotta take into account that margins count for the overall width also, here is something you can try, its without the margins, but u can add them back in if you want just adjust the widths of the left and right divs accordingly, but i think this may be a better solution

#wrapper {
margin:0 auto;
width:820px;
text-align: left;
}

#leftcontent {
float:left;
width:30%;
background:#fff;

padding-bottom:20px;
text-align:center;
}

#rightcontent {
float:right;
width:70%;
background:#fff;
padding-bottom:20px;
}

niemie
02-22-2005, 10:20 PM
Thanks, that worked great. {EDIT: Although, is there anyway to make the two columns a hard stop - if I make the wrapper smaller the right hand column when it has enough content, ends up pushed over to the far left... I am not understanding the best way to make the two columns' content stay put in their respective 30% and 70% of the wrapper width....maybe the text is not wrapping or something?}

Let me ask you this - If I want to put a few boxes in that left hand column stacked vertically, should I make a new class for each and put them on there with absolute positioning or is there a better approach considering the way the left hand column is constructed?

ronaldb66
02-23-2005, 10:00 AM
I think you'd be better off not floating the right column; leave width unspecified and give it a 31% left margin (enough to clear the left div); the left floated div will sit in the margin area, and everything should work as intended.

Since the left div is basically a wrapper of its own, when you place block level elements inside it they will stack vertically on their own; no need for positioning.

niemie
02-23-2005, 08:42 PM
That definately worked....

As far as boxes (I am going to have them stacked vertically on the left hand side) - what is the best method? I know when I have tried them before they have either worked in Firefox and not IE or visa versa. What's the best way to tackle them?

What I have done so far is this and it seems to work ok unless there is a better solution:

CSS:

#wrapper {
margin:0 auto;
width:800px;
text-align: left;
}

#leftcontent {
float:left;
width:30%;
height:100%;
background:#fff;
padding-bottom:20px;
text-align:center;
}

#rightcontent {
margin-left:32%;
height:100%;
background:#fff;
padding-bottom:20px;
}

#midcontent {
margin-left:1%;
margin-right:1%;
padding-bottom:20px;
}

#box1 {
width:90%;
height:52px;
text-align:left;
padding:10px;
border: 1px solid gray;
font-size:10px;
margin-bottom:20px;
}

#box2 {
width:90%;
height:52px;
text-align:left;
padding:10px;
background-color:#F5F5F5;
border: 1px solid gray;
font-size:10px;
margin-bottom:20px;
}

#box3 {
width:90%;
height:52px;
text-align:left;
padding:10px;
border: 1px solid gray;
font-size:10px;
margin-bottom:20px;
}

#box4 {
width:90%;
height:52px;
text-align:left;
padding:10px;
border: 1px solid gray;
font-size:10px;
margin-bottom:20px;
}

HTML:

<div id="wrapper">
<div id="midcontent">GRAPHIC HEADER</div>
<div id="leftcontent">
<div id="box1">Text</div>
<div id="box2">Text</div>
<div id="box3">Text</div>
<div id="box4">Text</div>
<div id="box5">Text</div>
</div>
<div id="rightcontent">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc a eros a augue feugiat varius. Nulla dictum, metus eu auctor condimentum, massa pede tristique quam, in interdum orci sapien vel ligula. Etiam nec urna. Sed scelerisque felis ut lorem. Sed condimentum, ipsum nec varius dictum, felis felis nonummy ante, at bibendum nunc nunc quis diam. Integer condimentum, mauris non sodales elementum, orci nibh pharetra erat, quis tempus tortor leo ut ligula. Suspendisse ac neque. In lobortis urna et lectus.
</div>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum