...

View Full Version : Expandable boxes floating in a container



Hylix
05-30-2010, 12:13 PM
Ey guys it's my first time making a website with the use of css and I really like it but still I have a little question about it.
I made a website and I wanted to make expandable boxes where I can put text in.
on the following link everything looks ok:
http://hylix.netau.net/mof/
but as soon as i want to add another box (on the left side) I get this effect.
http://hylix.netau.net/mof/index2.html
basicly I just want the little boxes to stay on the left side and the big boxes at the right side.
I tried to do this with float:left; or float:right; but it didnt worked out as I wanted it to.
someone got a good tip on how to fix this? or if there is even a better way of doing this?
also I am sorry if the css/html is sloppy, Its my first time :p

Excavator
05-30-2010, 12:56 PM
Hello Hylix,
In your second link you are seeing the float drop because your box model (http://www.w3.org/TR/CSS2/box.html) is off.

Your .container is 990px wide so the total width of everything you put in it cannot exceed that.
When you put 2 .left_box's in the width works out to 1182px. It works with one .left_box because the total width is only 966px and that fits.

Hylix
05-30-2010, 01:17 PM
Yes I also saw that but then I get to my problem I don't want the left box to appear next to the other left box I would love to have them under eachother. Or is it better to use 2 containers here?

Excavator
05-30-2010, 01:45 PM
Yes I also saw that but then I get to my problem I don't want the left box to appear next to the other left box I would love to have them under eachother. Or is it better to use 2 containers here?

div.left_box {
width: 216px;
background: url("images/text/box-bgb.png") top left;
padding-top: 30px;
float: left;
clear: left;
}

Hylix
05-30-2010, 02:39 PM
Wow thnx a lot for that, now I have 1 issue remaining. if i add more left boxes the right box will chance its position to the lowest left box like this:
http://hylix.netau.net/mof/
already tried the clear:right; but I saw that that wasn't fixing this problem, any other way to do this?

Excavator
05-30-2010, 10:24 PM
Wow thnx a lot for that, now I have 1 issue remaining. if i add more left boxes the right box will chance its position to the lowest left box like this:
http://hylix.netau.net/mof/
already tried the clear:right; but I saw that that wasn't fixing this problem, any other way to do this?

Look what happens when you change the order of your floats in the markup -

<div class="container">




<div class="left_box">
<div class="middle">
<div class="inside">
<p>Content goes here! Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<img src="images/text/box-bgt.png" alt="bottom">
</div>
</div>

<div class="right_box">
<div class="middle">
<div class="inside">
<p>Content goes here! Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<img src="images/text/text-bottom.png" alt="bottom">
</div>
</div>

<div class="right_box">
<div class="middle">
<div class="inside">
<p>Content goes here! Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<img src="images/text/text-bottom.png" alt="bottom">
</div>
</div>

<div class="left_box">
<div class="middle">
<div class="inside">
<p>Content goes here! Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<img src="images/text/box-bgt.png" alt="bottom">
</div>
</div>







<div class="spacer"><!-- No Content --></div>





</div>

That will probably mess up again when more content is added to those right boxes. Your layout might work better with a div containing those .right_box's so they are not affected by other floats. Have a look at a basic two-column layout here (http://nopeople.com/CSS/simple_2-column/index.html).

Hylix
05-31-2010, 04:04 PM
Ok I just did and it works, Thnx a lot for all your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum