CODEWITHSUNDEEP
csshtml
sam
sam

Reputation: 1241

Side by side divs

How to place two divs side by side with splitter between them?

That's what I mean:

alt text

I assume that html layout can looks something like this:

<div id="container">
    <div id="left"></div>
    <div id="splitter"></div>
    <div id="right"></div>
</div>

or

<div id="container">
    <div id="left">
        <div id="splitter"></div>
    </div>
    <div id="right"></div>
</div>

Upvotes: 4

Views: 4595

Answers (3)

red-X
red-X

Reputation: 5128

html:

<div id="container">
    <div id="left"></div>
    <div id="splitter"></div>
    <div id="right"></div>
</div>

css:

#container{
 width:990px; //or 100%
}
#left{
 width:300px; //or 30%
 float:left;
}
#splitter{
 width:90px; //or 5%
 float:left;
}
#right{
 600px; //or 65%
 float:left;
}

Upvotes: 3

Pascal H.
Pascal H.

Reputation: 54

Both are possible but I would go for the 2nd one since you can use float:left for the left div and float:right for right and since splitter is in the left div it goes to the correct spot.

Upvotes: 0

benhowdle89
benhowdle89

Reputation: 37454

put "float: left" on #left and #splitter, but as oezi said there are lots of ways to do this

Upvotes: 1

Related Questions