CODEWITHSUNDEEP
htmlcss
axy108
axy108

Reputation: 537

CSS table-cell 100% width

I am trying to create a layout like this:

layout

this is what I have so far:

HTML

<div id="wrapper">
<div id="top">
    <div id="top">100% width and  45px height </div>
</div>
<div id="middle">
    <div id="middleleft">Middle Left 20%</div>
    <div id="middlecenter">Center 60%</div>
    <div id="middleright">Middle Right 20%</div>
</div>
<div id="bottom">
    <div id="bottom">100% width and 30% height</div>
</div>

CSS

#top{
    width:???;
    height: 45px;
}
#bottom {
    width: ???;
    height: 30%;
}

http://jsfiddle.net/Jn6x6/

But I cannot make the top and buttom take the 100%.

Is this the right approach or should I try something different?

Thanks.

Upvotes: 0

Views: 743

Answers (3)

Alohci
Alohci

Reputation: 82976

Add 

#wrapper #middle {
    display:table;
    width: 100%;
    height: 100%;
}

to the CSS of your JsFiddle.

See http://jsfiddle.net/Jn6x6/1/

Upvotes: 1

Daniel Andrei Mincă
Daniel Andrei Mincă

Reputation: 5012

At < div id="top"> < div id="top">100% width and 45px height < /div> < /div>

try to give the 2nd id the name "top_box" and give the 1st id (#top) a width of 100% and the 2nd one (#top_box) a width of inherit

Also, try testing your HTML code in a newly created HTML file (example.html) and open it in a browser.

Upvotes: 0

LindaJeanne
LindaJeanne

Reputation: 214

Does

#top,
#bottom {
   width: 100%;
}

Not do what you need?

Upvotes: 0

Related Questions