...

View Full Version : lining up 3 DIVs and enabling resizing based on browser window



Partizan
02-17-2009, 02:40 PM
Hi, I am having a little issue with some DIVs on this page: http://www.minifigtimes.com/test.shtml

There are three DIV containers in a row and all wrapped in another DIV.

My first problem is that for some reason the first 2 DIVs are lined up side-by-side (no issue - this is what I wanted) but the third is not.

The second thing is that even if all three were lined up fine I would prefer if I did not have to specify the DIV widths in px, i.e. I would like for them to be able to expand / shrink as the browser window size is altered.

Any ideas?

This is the relevant code:




<div id="subwrapper">
<div id="first">
<div class="subimage"><img src="images-site/test-image-medium.png" alt="test"></div>
<div id="subbody">

Three second half goals from the reigning champions saw LFC end Napoli's 13 game unbeaten run at the San Paolo.



</div>
</div>
<div id="second">
<div class="subimage"><img src="images-site/test-image-medium.png" alt="test"></div>
<div id="subbody">

A goal from Den&#237;lson soon followed and the three points were secured by Marco Materazzi in the 83rd minute.



</div>
</div>

<div id="third">
<div class="subimage"><img src="images-site/test-image-medium.png" alt="test"></div>
<div id="subbody">

Ajax Skerries boss Roberto Donadoni praised his minifigs for beating the odds and claimed if they believe in themselves he believes they can go all the way.



</div>
</div>
</div> <!-- sub wrapper Div end -->



#subwrapper{
width:420px
}



#first{
margin:0;
padding:0;
width:130px;
background-color:white;
position:absolute;
}

#second{
top:0;
margin:0;
padding:0;
width:130px;
background-color:white;
position:relative;
left:140px;
}

#third{
top:0;
margin:0;
padding:0;
width:130px;
background-color:white;
position:relative;
left:280px;
}


.subimage{
background:white;
width:130px;
}

#subbody{
background-color:white;
}

AmmO
02-17-2009, 03:06 PM
well instead of pixels use ems and if your looking for a fluid 3 column layout check out

http://bonrouge.com/3c-hf-fluid.php

BoldUlysses
02-17-2009, 03:25 PM
Percentages seem like the way to go. First let's change your HTML to get rid of the divitis (http://csscreator.com/?q=divitis) (unnecessary divs) and clean it up:


<div id="subwrapper">
<div>
<img src="http://www.minifigtimes.com/images-site/test-image-medium.png" alt="test">
<p>Three second half goals from the reigning champions saw LFC end Napoli's 13 game unbeaten run at the San Paolo.</p>
</div>

<div>
<img src="http://www.minifigtimes.com/images-site/test-image-medium.png" alt="test">
<p id="subbody">A goal from Denílson soon followed and the three points were secured by Marco Materazzi in the 83rd minute.</p>
</div>

<div>
<img src="http://www.minifigtimes.com/images-site/test-image-medium.png" alt="test">
<p>Ajax Skerries boss Roberto Donadoni praised his minifigs for beating the odds and claimed if they believe in themselves he believes they can go all the way.</p>
</div>
</div> <!-- sub wrapper Div end -->


Note how the divs containing the text become <p>, which is what they really are, and how the <img> tags don't need a containing div either.

Next let's work on the CSS:


#subwrapper{
margin:0;
padding:0;
border:1px solid #f00; /*diagnostic*/
overflow:auto; /*these two lines*/
width:100%; /*uncollapse the box*/
}

#subwrapper div{
margin:0;
padding:0;
width:33%; /*sets the column width as a percentage of #subwrapper*/
float:left;
}

#subwrapper img{
width:130px;
}

If all three "columns" have exactly the same behavior in terms of the text and images, then there's no need to give them individual ids or even classes; CSS selectors work just fine. I added the border just to be able to tell where #subwrapper is; feel free to remove it as it's just a diagnostic technique (some prefer changing the background color temporarily, which works too).

Partizan
02-17-2009, 04:13 PM
Thanks alot msuffern, that was really very helpful, exactly what I wanted!! :) Red border helped too!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum