Using floats to postion contents into two colums

HTML & CSS
1

I think am overlooking some basic concept here. I am trying to display two “columns” and I thought this would be a simple job for floats and clears. I made a class for what I wanted on the left and one for what I wanted on the right. The problem the columns only form correctly if the classes are alternating ( ie: .left-.right -.left .right) furthermore the elements have to be the same height (as inf the ext element is cleared)

I thought that massaging the markup necessary when using this method and element that floated left did not affect elements that floated right ( unless there was a non floated element between them in the mark up, which is not the case.

essentially this is a simplified version of what I am doing:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
*{margin:0; padding:0; border:0;}
.left{float:left;background:skyblue; clear:left; overflow:auto}
.right{float:right; background:red; clear:right;margin-right:-400px}
.wrap div {width:400px; height:200px; overflow:auto}
.wrap {width:400px; margin:0 auto;border-right:400px solid orange;  background:pink }
.wrap:after{content:"";display:block; clear:both; visibility:hidden; height:0; /*cant use overflow:auto to clear  because I am making a equal height columun using the border technique...*/
</style>
</head>
<body>
<div class="wrap">
<div class="left"><img src="DSC02137.jpg"  height="100"></div>
<div class="left"><img src="DSC02137.jpg"  height="100"></div>
<div class="right"></div>
<div class="left"><img src="DSC02137.jpg"  height="100"></div>
<div class="right"></div>
</div>
</body>
</html>
2

A simple 2 column layout

 
<!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>
<title></title>
<style type="text/css">
 
#wrap {
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
width: 960px;
border: 1px solid black;
overflow: hidden
}
 
#left_col {
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
float: left;
width: 440px;
height: 400px;
background-color: green
}
 
#right_col {
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
float: right;
width: 440px;
height: 400px;
background-color: brown
}
</style>
</head>
<body>
 
<div id="wrap">
     <div id="left_col">This left column</div>
     <div id="right_col">This is right column</div>
</div>
 
</body>
</html>

you can then put whatever content you like in each column

3

I guess the challenge that I am trying to solve is not the creation of columns… but their arrangement of elements… in another words if I had a div for each column, I would ahve to arrange all the content of cone column in one div and the other in another. the left and right content are essentially scattered.

Yeah I think I know what you are wanting to do now and your right, there would be no sibling relation between the left and right elements, it would be visual only.

Here is another old demo of some image captions that were set up as two separate columns. That is the only way to get a stagger effect without any complications or large blocks of empty space,

4

AH Rayzur, I THINK I see.

I knew that floats would not rise above each other… but for some reason I thought there was … what I would clumsily describe as a left float flow and a right float flow. Ithe idea comes from the fact that if you DIND’T clear the elements ( and gave them a width so that all of the would fit in the view port at once), all the left floated elements would end up on the left and the right floated elements on the right regardless of what their position on the source order was.

I guess the challenge that I am trying to solve is not the creation of columns… but their arrangement of elements… in another words if I had a div for each column, I would ahve to arrange all the content of cone column in one div and the other in another. the left and right content are essentially scattered.

I suppose… when I think about it what I am trying to do is STACK divs…

5

The problem the columns only form correctly if the classes are alternating ( ie: .left-.right -.left .right)
That’s correct, floats will not rise above one another. For example, if the first two floats are left floats, then if the third float is a right float it will not rise up all the way to the top. That is the nature of floats, if it were not that way things would really be a mess as all floats would rise to the top of the page.

furthermore the elements have to be the same height (as inf the ext element is cleared)
Right again, floats of unequal heights will snag on each other unless they are cleared. It is a common problem when people try to use floats for image captions. One caption may contain more text than the other and then the snagging begins.

The Problem with Floats and Unequal Heights

As seen in that page the alternative is to use inline-blocks to prevent float snag.

The best way to achieve what I think you are trying to do is to nest each pair of floats (left and right) in their own container. That will allow them to have different heights without the next pair of floats snagging.

This example that I did for someone else recently may be close to what you are wanting to do.

http://www.css-lab.com/test/float-stagger.html

You could exclude any left or right float in the series as it went down the page if that is what you are wanting.

I don’t see the border sidebar as a valid solution in that case though, a simple 2-col faux image on the wrap div would be more suitable.

6

Thanks Kalon,

I fear I didnt make myself clear. What I would like to do is be able to palce each ELEMENT in the desired column location, not actually build to columns… per se. Essentially so the source code can be like this:



<div class="wrap">
<div class="left">This content will content on the left</div>
<div class="left">This content will content on the left</div>
<div class="right">This content will content on the right</div>
<div class="left">This content will content on the left</div>
<div class="right">This content will content on the right</div>
<div class="left">This content will content on the left</div>
<div class="right">This content will content on the right</div>
<div class="right">This content will content on the right</div>
</div>
7

Thanks Rayzur.

I guess I just have to rethink how I am structuring my content. I thought it was possible to build columns using JUST individual floated elements ( as opposed to floating wrappers) because of something that i thought I accomplished when styling a form a while ago. In fact the technique I used was exactly the same as posted at the beginning of the thread. I went back to review that code for the form and realized why it works on the form and not in page am currently working on…

The thing is the form had only 4 FIELDSETs…and as the FIRST FIELDSET was unequivocally always going to be be at the top I was really only floating 3 elements and never had to deal with random alternation …

ALAS that’s the one pitfall about CSS design that i find frustrating: many solutions to problems appear expandable but are actually are case specific.

Am posting this for future reference:
My restructuring solution was to wrap all the “main” type content ( after all that even makes semantic sense anyway) as a group, all the nav stuff as another , the “the secondary” stuff as another and even “tertiary” or pseudo footer as another… shuffling only four floats is way more manageable.

8

ALAS that’s the one pitfall about CSS design that i find frustrating: many solutions to problems appear expandable but are actually are case specific.

Float behavior is not as straightforward as it appears, it goes much deeper than just float:left or float:right

The way other elements behave beside a float can be confusing too. The thing to remember is that floats are removed from the normal flow of the page. Other elements will slide under them but the text in those elements will wrap around the float. We are able to regain the page flow with the clear property though.

As I pointed out above, things really would be worse if floats did rise above each other. When you find that what you are wanting to do just doesn’t work it is best to rethink the page like you did.

9

Yes. I see that. I give myself headaches sometimes, because I keep hearing that you shouldn’t have to alter mark up for the sake of layout and I then to include creating wrapper divs and/or putting or taking out elements in or out wrapper divs to … help with floats or positioning…ect.

10

Rayzur,

I can’t believe my luck, finding this thread which is only a couple of weeks old. I am trying to do exactly what you did in your “Inline-Block Image Captions” example, but couldn’t! Thanks for the great example. I tried a few little mods, removed the unordered list wrapper and changed the line items to divs, and the layout holds up fine.

One issue I dealt with right before this one was trying to find a way to keep the captions top-aligned when the images are of unequal heights, but bottom-aligning the images themselves. I worked with the CSS for a couple of hours trying to find a way to do this without using an extra “div” wrapper around the image. With your inline-block solution, I have exactly the layout I want. If you can offer any simpler CSS that gets the same, I would love to hear it. You can see my layout at the URL: www.davidkinsey.name/studio.htm

Thanks again,

  • DK
11

Hi David, Welcome to SitePoint! :slight_smile:

Glad you found the inline-block example helpful. It looks like it would have required another element anyway to do what you were wanting to do. Images are inline-elements and they are capable of taking on vertical-align but there would have needed to be another inline-element to line up to with a fixed height. An empty <b> element set as display:inline-block with a height will do the trick as seen in this example.

http://www.css-lab.com/demos/vertical-center/va-fix-height.html

The caption text was set to vertical-align:middle, that would be the image in your case but it would be set to v-a:bottom.

I don’t see anything wrong with your method though. It looks like you just set a height on the img div and then AP’d the img to the bottom. That is pretty simple and it achieves the same result. :wink: