CODEWITHSUNDEEP
css
WraithNath
WraithNath

Reputation: 18013

CSS Layout issues - need 100% width on 2 divs screenshot and fiddle included

Im trying to create a new master page without using a table and its causing me a headache.

Its very nearly there, I just need to make the 'Messages' and 'Content' divs full width so the 'Menu' div, plus the 'Messages' and 'Content' div are the same width (100% of the screen) as the 'Top' div.

I have set up a jsFiddle, can anyone give me some pointers?

enter image description here

https://i.sstatic.net/d1HO5.png

http://jsfiddle.net/CJRv5/

Im happy to change HTML a bit but the following must be considered:

menu is 130px wide, the rest of the content must fill remaining window width - no 960 grid!

Upvotes: 1

Views: 105

Answers (2)

Alex K.
Alex K.

Reputation: 175776

Simplest (unintuitive) way, just change

    #divMasterSubContainer
    {
        float: left;
        ...

to

    #divMasterSubContainer
    {
       overflow:hidden;
       ...

http://jsfiddle.net/CJRv5/2/ Ref http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Upvotes: 2

scibuff
scibuff

Reputation: 13755

^ you need to make sure that the width of menu + width of messages/content is not more than the width of the container in which they reside. Do something like this

div { border: 0; margin: 0; padding: 0;{

#content { 
    width: 100%;
}
.clear-both { clear: both; }
.float-left { float: left; }
#menu { width: 20%; }
#main { width: 80%; }

<div id="content">
    <div id="menu" class="float-left">
        <p>menu</p>
    </div>
    <div id="main" class="float-left">
        <div id="message"><p>messages</p></div>
        <div id="content"><p>content</p></div>
    </div>
    <div class="clear-both"></div>
</div>

Upvotes: 0

Related Questions