CODEWITHSUNDEEP
htmlcss
aroy
aroy

Reputation: 3

Expand width to take remaining width of parent div

An example of my code can be found on JSFiddle http://jsfiddle.net/WdZgV/

CSS

<style type="text/css">
body {
    margin: 0;
    padding: 0;
}

.header_div {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.header {
    display: inline-block;
    height: 100px;
    width: 100%;
    max-width: 1000px;
    background: #ddd;
}

.logo {
    float: left;
    width: 200px;
    height: 100px;
    background: #bbb;
}

.menu {
    float: left;
    width: 800px;
    height: 100px;
    background: #999;
}
</style>

HTML

<div class="header_div">
    <div class="header">
        <div class="logo"></div>
        <div class="menu"></div>
    </div>
</div>

What i want is that when you resize the window width to less than 1000px the .menu div resize to the size of the parent div.

So as an example:

If you have your window width as 900px, the .logo div has 200px and the .menu div has 700px.

Is there anyway i can do this with CSS, or i need to use Javascript?

Upvotes: 0

Views: 4441

Answers (3)

David Pelayo
David Pelayo

Reputation: 158

You may not want to play with floating properties but specifying the parent width and display to table.

Like in the following example: http://jsfiddle.net/A8zLY/745/

You would end up having something like:

HTML

<div class="header_div">
    <div class="header">
        <div class="logo"></div>
        <div class="menu"></div>
    </div>
</div>

CSS

.header_div {
 width: 1280px;
}

.header {
 display: table;
}

.logo {
 display: table-cell;
 width: 280px;
}

.menu {
 display: table-cell;
 width: 1000px;
}

You could specify width in percentages.

Upvotes: 0

snowp
snowp

Reputation: 491

@Andoni Roy Use this

.logo {
    float: left;
    width: 200px;    
    height: 100px;
    background: #bbb;
      }

.menu {
    float:right;    
    overflow:hidden;
    height: 100px;
    background: #999;
      }

Upvotes: 1

Barney
Barney

Reputation: 16466

Yes — remove the float, don't specify width, and set overflow to hidden. Example here; .menu becomes:

.menu {
    height: 100px;
    background: #999;
    overflow: hidden;
}

Upvotes: 3

Related Questions