Columns - alternate presentation using same HTML

Hello, I’m trying to style columns two different ways using CSS media queries.

HTML

<div id="main" role="main">
	<div class="column" id="col1">
		<p>column 1</p>
	</div>
		
	<div class="column" id="col2">
		<p>column 2</p>
	</div>
		
	<div class="column" id="col3">
		<p>column 3</p>
	</div>
		
	<div class="column" id="col4">
		<p>column4</p>
	</div>
		
	<div class="column" id="col5">
		<p>column5</p>
	</div>
		
	<div class="column" id="col6">
		<p>column6</p>
	</div>
    </div>

CSS

.column {
	float:left;
	width:100px;
	border:1px solid blue;
	margin-right:10px;
}

#col1{
	height:75px;
}

#col2 {
	height:200px;
}

#col3 {
	height:222px;
}

#col4 {
	height:250px;
}

#col5 {
	height:111px;
}

#col6 {
	height:50px;
}

Here is the standard/default view, which is working, as coded above

Here is the desired alternate view, which I haven’t been able to get working (keeping same HTML; only changing CSS)
[/IMG]

Here is my first attempt: removed “float” property on first two columns.


#col1,
#col2 {
float:none;
}

Any ideas on how to obtain the desired view while:

  1. keeping the same HTML above
  2. no absolute positioning

Also, could anyone explain why the method I used above is not working?

Thanks! Really appreciated.

One suggestion would be to wrap a div around the first two columns and change its width depending on the device width:


[COLOR="#FF0000"]<div class="contain">[/COLOR]
  <div class="column" id="col1">
    <p>column 1</p>
  </div>

  <div class="column" id="col2">
    <p>column 2</p>
  </div>
[COLOR="#FF0000"]</div>[/COLOR]

.contain {width: 110px;float:left;}

EDIT: Yeah, I know I changed the HTML, but I don’t think you’ll get this effect with floats without changing the HTML a bit.

An alternative would be to do this:

#col1{
height:75px;
position:absolute;
}

#col2 {
height:200px;
margin-top: 85px;

}

Some people don’t like using positioning as it takes one of the boxes out of the document flow.

LOL, I missed that part about no absolute positioning! :rofl:

So I guess nevermind. BTW, what is the reasoning for that?

Try this: a negative left margin on column 2 and positive margin on top:

#col2 {
height:200px;
margin: 85px 0 0 -100px (or so);

}

Thank you for the responses! The reason I don’t want to use absolute positioning is because the height of the columns is variable. Therefore, positioning values will have to change each time column height changes. I’m going to go w/ the negative margin method, even though the top margin of column2 will have to change if the height of column1 changes. I will live with that.

Thanks again!

Thank you for the responses! The reason I don’t want to use absolute positioning is because the height of the columns is variable.

Glad it worked out. It will be six of one, half a dozen of the other, since the absolute positioning is on column 1 in my first post, it pretty much would work out with a top margin change on column 2 either way you go. Although, if you had placed the absolute positioning on col 2, you would be right, you would change “top” rather than “margin-top”. But at least with negative margins, you don’t have to declare relative positioning if you decide to wrap the columns.