CODEWITHSUNDEEP
csshtmlpositioning
Malixxl
Malixxl

Reputation: 525

css positioning 2 divs in a div

i have a main div has 100% width, and 2 divs in it. one has 200px width and other will be 100%-200px, i mean;

  -----------------this is main div -------------
 |                                               |
 | ----subdiv1---- -------------subdiv2----------|
 ||              | |                            ||
 | --------------   ---------------------------- |
 |-----------------------------------------------|

subdiv1 has 200 px, subdiv2's width will be rest of empty space. I search on google but couldnt find.

Upvotes: 1

Views: 6270

Answers (3)

thirtydot
thirtydot

Reputation: 228282

You can float: left the left div, and have margin-left: 200px on the right div.

http://jsfiddle.net/SpxH9/

HTML:

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

CSS:

#container {
    overflow: hidden;
}
#left {
    float: left;
    width: 200px;
}
#right {
    margin-left: 200px;
}

There's another technique you can use, which is to replace margin-left with overflow: hidden. This is useful because you don't have to have the dimension in there twice, and it adapts to changes more easily.

For example, with 10px borders: http://jsfiddle.net/SpxH9/1/

#container {
    overflow: hidden;
}
#left {
    float: left;
    width: 200px;
}
#right {
    overflow: hidden;
}

If you try to do the same thing with the first technique I mentioned, you'll find that you have to manually calculate stuff: http://jsfiddle.net/SpxH9/2/ (and fixed: http://jsfiddle.net/SpxH9/3/)

Lastly, overflow: hidden on #container is used to contain the floats. You might wish to use clearfix instead.

Upvotes: 0

Solid I
Solid I

Reputation: 690

You're going to want to add float:left; to your subdiv1. Here is a few lines of code that will produce what you have shown. 

<div>
  <div style="float:left;width:200px;background:#0F0">
  SUBDIV1
  </div>
  <div style="background:#F00;">
  SUBDIV2
  </div>
</div>

In short, use float:left; on your subdiv1

Upvotes: 1

Jonah Bishop
Jonah Bishop

Reputation: 12591

Here's one possible solution I hacked up using a float: left rule for the left-most div, and a margin-left rule for the right div: http://jsfiddle.net/P4xMj/

Example HTML:

<div id="container">
    <div id="left">
        Some content here
    </div>
    <div id="right">
        Some more content goes over here on the right. Let's make this
        content really long to see what happens when we wrap more than
        one or two line's worth. Extra text to fill the void.
    </div>
</div>

Example CSS (the background colors are just for visibility):

#container {
    background: #FF0;
    overflow: auto;
    padding: 10px;
}

#left {
    background: #0F0;
    float: left;
    width: 200px;
}

#right {
    background: #F00;
    margin-left: 210px;
}

Upvotes: 5

Related Questions