CSS - two floated "columns" [Archive]

View Full Version : CSS - two floated "columns"

qwertyuiop

06-08-2005, 12:34 AM

Hello,
I'm making a new website layout from scratch. I just started and there's already a little issue that I've run into.

I have a content div that's floated left. I want to have three more divs, submenu, poll, and shoutbox, float right.

Here's the problem: When content doesn't have much content (lol), the three divs at the right pile up under content. When content has more content, it's ok.

Here's the code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>v2</title>

</head>

<body>

<div id="outer">
<div id="inner">

<div id="infobar">infobar</div>
<div id="header">header</div>
<div id="menu">menu menu menu</div>

<div id="content">
content content content content content content content content content
</div>

<div id="submenu">
submenu submenu submenu submenu submenu submenu submenu submenu
</div>
<div id="poll">poll?</div>
<div id="shoutbox">shout!</div>

<div id="footer">footer</div>

</div>
</div>

</body>
</html>
CSS:html,body {
font-family: Tahoma, Verdana, Arial, sans-serif;
color: #000;
font-size: 1em;
margin: 0;
padding: 0;
height: 100%;
}

#outer {
height: 100%;
}

#inner {
border: 1px solid #000;
margin: 0 auto;
width: 900px;
}

#infobar {
height: 25px;
width: 100%;
border: 0;
border-bottom: 1px solid #000;
}

#header {
height: 100px;
width: 100%;
border-bottom: 1px solid #000;
margin-bottom: 10px;
}

#menu {
width: 100%;
height: 25px;
border: 1px solid #000;
border-left: 0;
border-right: 0;
margin-bottom: 10px;
}

#content {
width: 690px;
border: 1px solid #000;
border-left: 0;
margin-bottom: 10px;
float: left;
height: 100%;
}

#submenu {
width: 200px;
border: 1px solid #000;
border-right: 0;
margin-bottom: 10px;
float: right;
}

#poll {
width: 200px;
border: 1px solid #000;
border-right: 0;
margin-bottom: 10px;
float: right;
}

#shoutbox {
width: 200px;
border: 1px solid #000;
border-right: 0;
margin-bottom: 10px;
float: right;
}

#footer {
width: 100%;
height: 25px;
border: 0;
border-top: 1px solid #000;
clear: both;
}

How can I make the three right columns stay on the right, regardless of the content's size?
Thanks.

Bobbo171

06-08-2005, 12:44 AM

try

clear: right;

in poll and shout

harbingerOTV

06-08-2005, 12:48 AM

first thing is that sume of your 3 right columns + your content is wider than the width of the #inner they are contained in.

here's an easier way to do what your trying to do:

1st take off all the float:right you have on the 3 divs then add this to your css:

#sidebar {
width: 200px;
float: right;
}

and do your html like this:

<body>
<div id="outer">
<div id="inner">
<div id="infobar">infobar</div>
<div id="header">header</div>
<div id="menu">menu menu menu</div>
<div id="sidebar">
<div id="submenu">
submenu
</div>
<div id="poll">poll?</div>
<div id="shoutbox">shout!</div>
</div>
<div id="content">
content
</div>
<div id="footer">footer</div>
</div>
</div>
</body>

easier to just wrap them in one box that floats than trying to fight things.

qwertyuiop

06-08-2005, 12:51 AM

Ah, so I just put a container for the right columns... Let me try it.

EDIT: yay, it works!

qwertyuiop

06-08-2005, 12:55 AM

Would it be possible for content to be stretched to the bottom (I put in height: 100%, but it doesn't seem to work). See, if the sidebar's height is greater than the content's height, then make the content stretch to the bottom. That way, it's it even. But if content's height is greater, just leave sidebar alone (any other suggestions?)

I seem to recall reading somewhere that this can't be done....

Thanks.

Bobbo171

06-08-2005, 01:01 AM

harbingerOTV

06-08-2005, 01:04 AM

I was just about to suggest that. As it's just a wireframe right now it would take a lot of funky code that may or maynot work. once you start dropping in some color and stuff the faux columns approch is a breeze.

qwertyuiop

06-08-2005, 01:07 AM

Yeah, seems pretty simple. So there's really no way to do this with plain css?

Thanks though.

harbingerOTV

06-08-2005, 01:24 AM

I can get it to work in Moz but not in IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>v2</title>
<style type="text/css">
html,body {
font-family: Tahoma, Verdana, Arial, sans-serif;
color: #000;
font-size: 1em;
margin: 0;
padding: 0;
height: 100%;
}

#outer {
height: 100%;
}

#inner {
border: 1px solid #000;
margin: 0 auto;
width: 900px;
}

#infobar {
height: 25px;
width: 100%;
border: 0;
border-bottom: 1px solid #000;
}

#header {
height: 100px;
width: 100%;
border-bottom: 1px solid #000;
margin-bottom: 10px;
}

#menu {
width: 100%;
height: 25px;
border: 1px solid #000;
border-left: 0;
border-right: 0;
margin-bottom: 10px;
}

#content {
width: 690px;
border: 1px solid #000;
border-left: 0;
border-bottom: 0;
margin-bottom: 10px;
height: 100%;
}
#clearingthingy {
height: .01em;
width: 690px;
border-bottom: 1px solid red;
display: block;
clear: right;
}

#submenu {
width: 200px;
border: 1px solid #000;
border-right: 0;
margin-bottom: 10px;

}

#poll {
width: 200px;
border: 1px solid #000;
border-right: 0;
margin-bottom: 10px;

}

#shoutbox {
width: 200px;
border: 1px solid #000;
border-right: 0;

}

#footer {
width: 100%;
height: 25px;
border: 0;
border-top: 1px solid #000;
clear: both;
}
#sidebar {
width: 200px;
float: right;
}
</style>

</head>

<body>

<div id="outer">
<div id="inner">

<div id="infobar">infobar</div>
<div id="header">header</div>
<div id="menu">menu menu menu</div>
<div id="sidebar">
<div id="submenu">
submenu
</div>
<div id="poll">poll?</div>
<div id="shoutbox">shout!</div>
</div>
<div id="content">
content
<div id="clearingthingy"></div>
</div>

<div id="footer">footer</div>

</div>
</div>

</body>
</html>

not sure why but your more than welcome to play with it. the faux columns is still easier ;)

qwertyuiop

06-08-2005, 01:24 AM

The drawback with this method is that if the background image isn't available, then it might screw up the layout or make the text hard to read...right? Or is there a way you can make the background span several columns and make the <div>s have their own background?

EDIT: How does the clearthingy work?

harbingerOTV

06-08-2005, 01:58 AM

the clear thingy doesn't really work. The idea is to make it be the bottom border of the content div. .01em is the smallest it can go. that way it looks like the contents bottom border and doesn't leave a space. then have it clear:right so that clears the sidebar.

Mozilla likes it nested in the content and still clears it.

ie doesn't.

on your other ?. yeah, if the image doesn't load for some reason it can make things look bad.

qwertyuiop

06-08-2005, 02:01 AM

But then the content is moved in the html. It's not exactly where I prefer it.... Hmm, the faux columns look like the best option. Thanks!

Simonp

06-08-2005, 03:12 AM

Problem with floats is that they are relative and the element is not removed from the flow of the document, it just allows other things to flow around it. In other words if you float an element right and clear the following element left the second element is just allowed to flow around to the left of the floated object, and ll the other objects just continue to flow down the page as normal.

The only other alternative I can suggest is to use absolute positioning rather than floats which remove the objects from the doc flow and position them exactly where u like!

qwertyuiop

06-08-2005, 04:07 AM

Absolute positioning is relative to the window? So if you made something top: 50px; left: 100px; then if you resized the page, it will be cut off. But if you used %ages, then it would be fluid?

Or I could use position: relative......

mrruben5

06-08-2005, 08:49 AM

Elements with a absolute positioning inside a relative element will be positioned from the top left of that parent element.

Simonp

06-08-2005, 02:22 PM

Yep, absolute positioning is relative to the browser window, ie top left should be
div {
position: absolute;
top: 0px;
left: 0px;
}

then add the sizing and styling attributes to the rule (width, height margin, padding etc) - must be to a block level element tho (div, p, h1 etc), not inline element (span etc).

Not too sure about Rubens comment tho? Think this is true if both elements are of the same type....(Ruben are you sure?, I thought that absolute is exactly absolute relative to window regardless of any other element on the page)...but not too sure....you got more info or example?

Not too sure about an element being cut off either. In theory, if you position top: 50px left 100px, then the top left corner of the object (div element for example) will start at that position. It may of course be cut off if resizing the page, depending on the size and dimension attributes you give the element.

And yes using % will make the whole layout fluid, but beware, can be hard to control, also look out for IE5.5 box model problems. You'll need to use the Box model hack to fix this. (see www.tantek.com)

Hope this helps. :thumbsup:

J&J

06-08-2005, 02:40 PM

Personally, I use CSS without floats for my columns:

/* contains all */
#container {
position: absolute;
width: 750px;
top: 350px;
left: 50%;
margin: 0 0 0 -375px;
padding: 0;
}

/* contains all left column content - main stuff */
#leftCol {
width: 490px;
margin: 0;
padding: 0;
}

/* contains all right column content - menu, etc */
#rightCol {
position: absolute;
top: 0;
right: 0;
width: 245px;
margin: 0 0 0 500px;
padding: 0;
}

One thing that helped when I first tried the above was setting a temporary border and/or background color to my columns so I could see where everything sits... Then I can see if my positioning's wrong, or if its a padding/margin issue, etc.
You should try it (using various funky colors); you can always delete the colors once you're all done troubleshooting.

qwertyuiop

06-08-2005, 11:18 PM

J&J: I don't see why you need absolute positioning for that code you posted. Wouldn't margins by themselves work?

qwertyuiop

06-08-2005, 11:49 PM

The faux columns method might not work now that I've thought about it.

The right column isn't a continuous column. It is actually several "blocks" (submenu, poll, and shoutbox) that make up a right column. The faux columns method wouldn't work because there are breaks (spacing) between the blocks.

I drew out the layout on paper (before any coding). It looks pretty good. I'll try to scan it later. You'll see how the columns will work.

Since my layout is only a rough draft and is still being designed, I might decide to change something later. Maybe I'll make the content (left column) composed of blocks also (for each post or update).

harbingerOTV

06-09-2005, 12:59 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>v2</title>
<style type="text/css">
html,body {
font-family: Tahoma, Verdana, Arial, sans-serif;
color: #000;
font-size: 1em;
margin: 0;
padding: 0;
height: 100%;
}

#inner {
border: 1px solid #000;
margin: 0 auto;
width: 900px;
background: #892222;
}

#infobar {
height: 25px;
width: 100%;
border: 0;
border-bottom: 1px solid #000;
background: #fff;
}

#header {
height: 100px;
width: 100%;
border-bottom: 1px solid #000;
margin-bottom: 10px;
background: #fff;
}

#menu {
width: 100%;
height: 25px;
border: 1px solid #000;
border-left: 0;
border-right: 0;
margin-bottom: 10px;
background: #fff;
}

#content {
width: 690px;
}
#content p {
background: #fff;
border: 1px solid #000;
border-left: 0;
margin: 0 0 10px 0;
}
.content {
padding: 6px;
}
#submenu {
width: 200px;
border: 1px solid #000;
border-right: 0;
margin-bottom: 10px;
background: #fff;
}

#poll {
width: 200px;
border: 1px solid #000;
border-right: 0;
margin-bottom: 10px;
background: #fff;
}

#shoutbox {
width: 200px;
border: 1px solid #000;
border-right: 0;
margin-bottom: 10px;
background: #fff;
}

#footer {
width: 100%;
height: 25px;
border: 0;
border-top: 1px solid #000;
clear: both;
background: #fff;
}
#sidebar {
width: 200px;
float: right;
}
</style>

</head>

<body>

<div id="inner">

<div id="infobar">infobar</div>
<div id="header">header</div>
<div id="menu">menu menu menu</div>
<div id="sidebar">
<div id="submenu">
submenu
</div>
<div id="poll">poll?</div>
<div id="shoutbox">shout!</div>
</div>
<div id="content">
<p class="content">Praesent eget quam ut libero nonummy tempus. Donec at ligula. Donec sit amet erat a turpis blandit

hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In hac habitasse

platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque

ultrices vulputate velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ultrices porttitor nibh.

Quisque molestie. Ut feugiat ipsum vel elit. Nunc placerat. Donec a urna a purus ultricies imperdiet.</p>
<p class="content">Praesent eget quam ut libero nonummy tempus. Donec at ligula. Donec sit amet erat a turpis blandit

hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In hac habitasse

platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque

ultrices vulputate velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ultrices porttitor nibh.

Quisque molestie. Ut feugiat ipsum vel elit. Nunc placerat. Donec a urna a purus ultricies imperdiet.</p>
<p class="content">Praesent eget quam ut libero nonummy tempus. Donec at ligula. Donec sit amet erat a turpis blandit

hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In hac habitasse

platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque

ultrices vulputate velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ultrices porttitor nibh.

Quisque molestie. Ut feugiat ipsum vel elit. Nunc placerat. Donec a urna a purus ultricies imperdiet.</p>
</div>

<div id="footer">footer</div>

</div>

</body>
</html>

anything close to what your trying to do?

qwertyuiop

06-09-2005, 01:36 AM

Isn't that mostly the code I have? Besides the content blocks... Yeah, that's what I'm aiming for.

But that doesn't solve the two column's equal height. Do you think javascript would be ideal? Somehow find #sidebar's height and make #content's min-height equal to that?

I'm still going to scan the layout I drew later.

EDIT: I just found this (http://projectseven.com/tutorials/css/pvii_columns/)! I'm going to try it now.

harbingerOTV

06-09-2005, 01:57 AM

yeah it was.

looks like that script is what your going for. fool around with it and see how it works.

bookmarking it as I type ;)

qwertyuiop

06-09-2005, 02:07 AM

It works! Yay The scrolling effect is kinda interesting too... :)

I want to move the body onload to the js, but when I do this (in the last line of js):
window.onload=P7_equalCols('content','sidebar');
it doesn't work....

Edit: I got the onload stuff to work. Now I don't need any onload="" in the body tag.

qwertyuiop

06-10-2005, 12:06 AM

Can the javascript be adjusted so that if you changed your text size, the div would expand as the text size grows?

Here's my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>v2</title>
<script type="text/javascript">
/*
------------------------------------------------
PVII Equal CSS Columns
Copyright (c) 2005 Project Seven Development
www.projectseven.com
Version: 1.6.0
------------------------------------------------
*/
function P7_colH(){ //v1.6 by PVII-www.projectseven.com
var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;if(dA&&dA.length){
for(i=0;i<dA.length;i++){dA[i].style.height='auto';}for(i=0;i<dA.length;i++){
oh=dA[i].offsetHeight;h=(oh>h)?oh:h;}for(i=0;i<dA.length;i++){if(an){
dA[i].style.height=h+'px';}else{P7_eqA(dA[i].id,dA[i].offsetHeight,h);}}if(an){
for(i=0;i<dA.length;i++){hh=dA[i].offsetHeight;if(hh>h){
dA[i].style.height=(h-(hh-h))+'px';}}}else{document.p7eqa=1;}
document.p7eqth=document.body.offsetHeight;
document.p7eqtw=document.body.offsetWidth;}
}
function P7_eqT(){ //v1.6 by PVII-www.projectseven.com
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){
P7_colH();}
}
function P7_equalCols(){ //v1.6 by PVII-www.projectseven.com
if(document.getElementById){document.p7eqc=new Array;for(var i=0;i<arguments.length;i++){
document.p7eqc[i]=document.getElementById(arguments[i]);}setInterval("P7_eqT()",10);}
}
function P7_eqA(el,h,ht){ //v1.6 by PVII-www.projectseven.com
var sp=10,inc=20,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);
ch=(ch)?ch:h;var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px';
oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+'px';}
if(nh<adT){setTimeout("P7_eqA('"+el+"',"+nh+","+ht+")",sp);}
}

window.onload=function(){
P7_equalCols('content','sidebar');
}
</script>

<style type="text/css">
html,body {
font-family: Tahoma, Verdana, Arial, sans-serif;
color: #000;
font-size: 1em;
margin: 0;
padding: 0;
height: 100%;
}

body {
text-align: center;
background: #333;
}

#outer {
height: 100%;
text-align: left;
margin: 20px auto;
}

#inner {
border: 1px solid #000;
margin: 0 auto;
width: 900px;
background: #CCC;
}

#infobar {
height: 25px;
width: 100%;
border: 0;
border-bottom: 1px solid #000;
}

#header {
height: 100px;
width: 100%;
border-bottom: 1px solid #000;
margin-bottom: 10px;
}

#menu {
width: 100%;
height: 25px;
border: 1px solid #000;
border-left: 0;
border-right: 0;
margin-bottom: 10px;
}

.block {
background: #F0F0F0;
}

#content {
width: 690px;
border: 1px solid #000;
border-left: 0;
margin-bottom: 10px;
float: left;
height: 100%;
}

#sidebar {
width: 200px;
float: right;
margin-bottom: 10px;
padding-right: 1px;
}

#submenu {
width: 100%;
border: 1px solid #000;
border-right: 0;
margin-bottom: 10px;
}

#poll {
width: 100%;
border: 1px solid #000;
border-right: 0;
margin-bottom: 10px;
}

#shoutbox {
width: 100%;
border: 1px solid #000;
border-right: 0;
}

#footer {
width: 100%;
height: 25px;
border: 0;
border-top: 1px solid #000;
clear: both;
}
</style>

</head>

<body id="sfxhome">

<div id="outer">
<div id="inner">

<div id="infobar" class="block">infobar</div>
<div id="header">header</div>
<div id="menu" class="block">menu menu menu</div>

<div id="content" class="block">
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
</div>

<div id="sidebar">
<div id="submenu" class="block">
submenu submenu submenu submenu submenu submenu submenu submenu
submenu submenu submenu submenu submenu submenu submenu submenu
submenu submenu submenu submenu submenu submenu submenu submenu
</div>

<div id="poll" class="block">poll?<br />is this a poll?<br /><input type="radio" />yes<br /><input type="radio" />no</div>

<div id="shoutbox" class="block">shout!</div>
</div>

<div id="footer" class="block">footer</div>

</div>
</div>

</body>
</html>

Notice how making the text size larger doesn't affect the content div's height.

harbingerOTV

06-10-2005, 01:17 AM

when i add more content to the content sp that is fills the whole space even with the sidebar and then make the contents font size larger the box expands.

I don't know if I'm seeing the problem you are but it appears the way you set the script to work that the content box will only expand when the text inside of it spans past the height of the side bar. isn't that what you were after?

qwertyuiop

06-10-2005, 02:02 AM

Sorry, I wasn't clear. I mean when the user resizes the text size (View > Text Size....), the content box doesn't expand like a regular div. Can this be adjusted?

harbingerOTV

06-10-2005, 01:34 PM

alright im on the same page now.

I see what you mean. weird. if you enlarge the text it doesn't expand until after a refresh. and visa versa for setting the text smaller/normal.

Maybe you can dig up a javascript somewhere that activates when the user increases/decreses the text where it auto refreshes your page. since that is a function I'm sure somewhere out there someone has had the same problem and wriiten a refresh script.

J&J

06-11-2005, 06:44 AM

Here are some sites where I've used that concept (no floats):

http://simply-irresistible.org/

http://www.jandjwebservices.com/

qwertyuiop

06-11-2005, 10:33 PM

J&J: pretty nice layouts. I noticed one thing about them though, when you resize the page horizontally, it moves the site past the left border... What method did you use?

I finally scanned the layout. I'm posting it at my other thread (http://www.codingforums.com/showthread.php?p=320394#post320394), in the Site Reviews section. That's what I'm aiming for.