CODEWITHSUNDEEP
htmlcss
Chris307
Chris307

Reputation: 13

Div not expanding to fill the window

I've been trying to find a solution to this for days, but haven't found anything that works. I thought I'd finally make an account on this great website, so here goes:

I am trying to have a div expand from left to right, with 170px of clearance on both sides. However, when there is no content on the page, or only a few words, the div doesn't expand. I've tried to add width: 100% in several different divs to try and have them take up the full space, but that either does nothing, or completely busts the page layout. for example, instead of filling out the page, the div that's supposed to hold the content moves off the right side of the screen, and also doesn't leave the 170px margin.

I hope you can be of help, my code is posted below: Thanks in advance, Chris

the html:

<html>
<body>
<div id="wrapper">
    <div id="pagetopwrap">
    </div>
    <div id="pagemainliquid">
        <div id="pagemainwrap">
            <div id="content">

                <div id="headerwrap">
                    <div id="header_left">
                    </div>
                    <div id="header_main">
                        <div id="logo_row">
                            <p id="logotext">Site Title</p>
                        </div>
                        <div id="menu_row">
                            <!-- irrelevant menu button code -->
                        </div>
                    </div>
                    <div id="header_right">
                    </div>
                </div>
                <div id="contentbody">
                    <div id="contenttext">
                        <p id="contenttextmakeup">Lorum Ipsum Dolor Sit Amet</p>
                    </div>
                </div>
             </div>
        </div>
    </div>
    <div id="leftcolumnwrap">
        <div id="leftcolumn">
        </div>
    </div>
    <div id="rightcolumnwrap">
        <div id="rightcolumn">
        </div>
    </div>
    <div id="footerwrap">
        <div id="footer">
        </div>
    </div>
</div>
</body>
</html>

the css: It is not ordered too well, the uninteresting sides, top and footer are first, and the main part of the website at the bottom

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #0f0f0f; /* is normally an image */
}

#wrapper {
    width: 100%;
    min-width: 960px;
    max-width: 1920px;
    margin: 0 auto;
    height: 100%
}

#pagetopwrap {
    height: 50px;
    width: 100%;
    float: left;
    margin: 0 auto;
}


#pagemainliquid {
    float: left;
}

#pagemainwrap {
    margin-left: 170px;
    margin-right: 170px;
    float: left;
}

#leftcolumnwrap {
    width: 170px;
    margin-left:-100%;
    float: left;
}

#leftcolumn {
    margin: 5px;
}

#rightcolumnwrap {
    width: 170px;
    margin-left: -150px;
    float: left;
}

#rightcolumn {
    margin: 5px;
}

#footerwrap {
    width: 100%;
    float: left;
    margin: 0 auto;
    clear: both;
    bottom:50px;
}

#footer {
    height: 0px;
    margin: 5px;
}

#headerwrap {
    width: 100%;
    margin: 0 auto;
}
#header_left {
    background-color: #ff0000; /* is normally an image */
    width:25px;
    height:200px;
    float:left;
}
#header_right {
    background-color: #ff0000; /* is normally an image */
    width:25px;
    height:200px;
    margin-left: 0px;
    float:right;
    position:relative; top:-200px;
}
#header_main {
    background-color: #00ff00; /* is normally an image */
    margin-left: 25px;
    margin-right: 25px;
    height:200px;
    background-size: 100% 200px; 
}
#contentbody {
    background-color: #E2E2E2;
    border-radius: 10px;
    margin-top:10px;
    border: 1px solid #A7A7B2;
}
#contenttext {
    margin-left:10px;
    margin-right:10px;
}
#logo_row {
    height:150px;
    width:100%;
    float:left;
}
#logotext {
    margin-top:20px;
    margin-left:10px;
    vertical-align: middle;
    font-size: 55px;
    font-family: "Arial Black", Arial;
}
#contenttextmakeup {
    margin-top:12px;
    margin-left:10px;
    vertical-align: middle;
}
#menu_row {
    width:100%;
}
button.menubutton {
/* irrelevant button markup */
}

http://jsfiddle.net/w9qLh6tp/ if that helps, I've seen it a lot around here :)

Upvotes: 1

Views: 991

Answers (2)

Paulo
Paulo

Reputation: 170

Instead of using !important, save yourself a headache in figuring out why important works.

CSS = cascading style sheets. You have a selector with more specificity which is why your width property isnt changing. Figuring out the route of the problem will save you time in the future when this happens again (and it will)

For example, if I styled something like so

#container .red { width: 50% }

updating the style using .red without the #container in front of it has less specificity. So if they are both modifying the same property, the one with more prevalence will take effect. This is true for media queries as well.

Upvotes: 1

Ashima
Ashima

Reputation: 4824

Fixed here http://jsfiddle.net/w9qLh6tp/1/

 #pagemainwrap {
        margin-left: 170px;
        margin-right: 170px;
        float: left;
        width: 100% !important; // set it highest priority
        border: 3px red solid; // border is set just for demonstration
    }

set the width to be 100% with priority (!important) that will override any other css styling.

Upvotes: 0

Related Questions