Divs Layout Coding [?]

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?

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 :)

so float them in the direction
like

Navigation Float left Content Float Center and Radio Float Right?

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

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

Code:

---

<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

Code:

---

<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 :)

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

Quote:

---

Originally Posted by LegendOfNoob

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

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

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 :)

Code:

---

<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

Code:

---

#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

Code:

---

overflow:hidden;

---

THanks i can finally finish coding a layout for me mate