Divs Layout Coding [?]

[LegendOfNoob]

k so i read --ss--'s Tut and it basically started nice i was doing good then i got into my content boxes now im mad.. how do i design with putting boxes side by side instead o putting all the boxes on top of each other when coding

tbh i wouldnt beleive he would answer a pm or it would take forever >.<

does anyone know how i thought of a few techinques then it blew up in my face because they needed to be side by side aswell so im pretty anoyed by this dilema

pls help?

[kk.]

erm, im sure there is a better way but add:
float:left;
to both of the styles. im pretty sure their is a better way but that works for me :)

[LegendOfNoob]

so float them in the direction
like

Navigation Float left Content Float Center and Radio Float Right?

[kk.]

no, is only float left and right.

say you had a div id named content and one called box, add float:right; to both styles, they should align next to each other. you could also use a table. that might be easier

[NathanTBH]

Hi. if you wanted 2 divs next to each other you would do it like this



<div>
<div style="width:50%; float:left;">Left Hand Box</div>
<div style="width:50%; float:right;">Right Hand Box</div>
</div>


let says you want 3 divs next to each other you would do this like this



<div>
<div style="width:25%; float:left;">Left Side Box</div>
<div style="width:75%; float:right;">
<div style="width:50%; float:left;">Middle Box!!!!</div>
<div style="width:25%; float:right;">Right Side Box!!!!</div>
</div>
</div>


the above are for example only and can be modified to how you need the divs sizing to be etc :)

[LegendOfNoob]

wow thanks bunches
+rep to Nathan *thanks a bunch* for the help
and Jimbo For Advice

*finally a thread i dont want to close due to arguements and anoyounces*

*Yay 400th Post Go Me*


Edit: Tbh i cant be bother to make a thread is there any setting to make it expand because ive had no luck with that

[NathanTBH]

Edit: Tbh i cant be bother to make a thread is there any setting to make it expand because ive had no luck with that

Can you explain what you mean as they should expand downward with the content

[LegendOfNoob]

well when i try to use --ss--'s guide it doesnt expand it just sits there and runs into the other divs

[NathanTBH]

If the are not sized properly they will overflow into the nexted div and make sure you build your content boxes inside the floating div like the following example :)



<div>
<div id="left_box">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div id="right_cont">
<div id="middle_box">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div id="right_box">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
</div>
And CSS Like This



#right_cont{
width:75%;
float:right;
}
#left_box{
width:25%;
float:left;
}
#left_box .top{
/*Left Inner Box Top --ss-- Code CSS*/
}
#left_box .middle{
/*Left Inner Box Middle --ss-- Code CSS*/
}
#left_box .bottom{
/*Left Inner Box Bottom --ss-- Code CSS*/
}
obviously add the css coding for the middle box and the right hand box :) i may of not got what your trying to do. http://habbo.am thats my layout witch is coded in divs. If i have got what your trying to do wrong i appoligise :)

And to hide any overflow put into your css this on witch ever div you want it to be affected on


overflow:hidden;

[LegendOfNoob]

THanks i can finally finish coding a layout for me mate

[NathanTBH]

No Problem :) need anymore help you's can pm me lol might not answer straigh away but il try too XD

[--ss--]

Can show us an live demo of what you've done so far as that way it's much easier to understand what problems you're facing ;).

[LegendOfNoob]

thanks for the gesture but im fine now ill post when im done and here if i have any problems it should be fine ima ask my mate i think when im done using it ill probally give out free to the public ;]