CODEWITHSUNDEEP
htmlcss
lawls
lawls

Reputation: 1508

Auto expand div's width

Take a look at this fiddle that I found, and resize the result window: http://jsfiddle.net/qPHgR/286/

Here's the css from the fiddle:

.left { 
    float: left;
}
.right { 
    background-color: #DDD;
    overflow: hidden;
}

I want to achieve the same thing, but I want the right div to have a fixed width (300px) and the left div to expand/contract when the window is resized. I can not figure out how to fix it without changing the HTML order of left and right div in the code. I've experimentet with floats and other attirbutes but can't make it work.

Thanks for your help!

Upvotes: 0

Views: 5369

Answers (5)

thirdender
thirdender

Reputation: 3951

Updated jsFiddle

The floats are important for keeping the two elements next to each other. I added 310 pixels of margin to the right of the left DIV (300 pixels for the right DIV, and 10 pixels as white space). I then used a negative margin-left to pull the right DIV over on top of that margin.

I also added overflow: hidden; on DIV.container to illustrate a simple float containment solution. This can be removed if unnecessary, but you may find it makes the remainder of your layout styling easier.

Upvotes: 0

Harshad
Harshad

Reputation: 570

Check this:

HTML:

<div class="container">
    <div class="left">
        some text goes here which is just here to change
    </div>    
    <div class="right">
        some longer bunch of text to go here, it should stick to the right some longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the right
    </div>
</div>

​CSS:

.left { 
    float: left;
margin-right: 300px;
    border: 1px solid #000;
}
.right { 
position: absolute;
    right: 0;
    width: 300px;
    background-color: #DDD;
    overflow: hidden;

}
​

Hope this works for you...!

Upvotes: 0

eberswine
eberswine

Reputation: 1224

How about this: http://jsfiddle.net/7DKX8/2

.left {
    float: left;
    background-color: #DDD; } 

 .right {

     width: 300px;
     overflow: hidden; }

Upvotes: 1

scronide
scronide

Reputation: 12248

.container {
  position: relative;
}
.left { 
  background-color: #DDD;
  margin-right: 300px;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}

Upvotes: 1

jackcogdill
jackcogdill

Reputation: 5122

Is this sort of what you want? http://jsfiddle.net/3ZUas/

The text interferes, but is this what you were going for?

Main thing is float: right;

Upvotes: 0

Related Questions