How to change this CSS code to get required layout


Tags: css

Problem :

The following is my CSS code. With this code I am getting 100px width left and right menus, and 700px width middle content. (A total width of 900px.) However, my requirement is 100px width left and right sidebars and 800 px width middle content. (Total width 1000px.) How should change the following CSS code to do that? I tried my best, but it messes up when changing values.

html,
body {
    margin: 0;
    padding: 0;
    margin: 0 100px;
    background: url("assets/bg_paper.jpg") repeat-x;
}
body {
    font: 76% arial,sans-serif;
    text-align: center;
}
p { margin: 0 10px 10px }
a {
    display: block;
    color: #981793;
    padding: 10px;
}
div#header h1 {
    height: 80px;
    line-height: 80px;
    margin: 0;
    padding-left: 10px;
    background: #ffffff;
    color: #79B30B;
}
div#container { text-align: left }
div#content p { line-height: 1.4 }
div#navigation { background: #ffffff }
div#extra { background: #FFffff }
div#footer {
    background: #ffffff;
    color: #FFF;
}
div#footer p {
    margin: 0;
    padding: 5px 10px;
}
div#container {
    width: 900px;
    margin: 0 auto;
}
div#wrapper {
    float: left;
    width: 100%;
}
div#content { margin: 0 100px }
div#navigation {
    float: left;
    width: 100px;
    margin-left: -900px;
}
div#extra {
    float: left;
    width: 100px;
    margin-left: -100px;
}
div#footer {
    clear: left;
    width: 100%;
}

<!---- language:HTML-------->
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
</div>
<div id="extra">
<p><strong>3) More stuff here.</strong> column long make silly silly filler silly very very very long column filler fill make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>


Solution :

try this

div#container {
width: 1000px;
margin: 0 auto;}

Hope this will helps!! or reply me back..


    CSS Howto..

    CSS form with side by side fields…how to align the labels and fields vertically?

    How to edit the CSS of a div that does not contain a H1 tag?

    How to display form labels with more than one element per line? jsfiddle

    Create template page for showing jpg's from direct links [closed]

    How to use a background image in Webfolio WordPress theme without breaking CSS header?

    How to not apply a webpage's CSS on the div I am inserting into it via content scripts?

    How to hide content that is not wrapped by tag using only CSS?

    How to replace only the text of this element with jQuery?

    How to properly wait for browser reflow/repaint to finish

    How can I line up my CSS DIVs

    How to visually indicate current page in ASP.NET MVC?

    Howto get html popup inside svg at correct position (using javascript)

    I'm am trying to have a responsive navigation bar for small screens, how can I change the left links to a css drop-down menu?

    How make a page fit on any screen with any orientation [closed]

    How to move stacked columns up (using bootstrap but any css will do)

    How can clients without Ruby view web pages using SASS?

    website div won't stretch from left to right, how do you fix css?

    How can I apply an external CSS class to a span created with dojo.create?

    How to select classes that are not nested? CSS

    Polymer 1.x: How to imperatively (using JS) obtain the value of a custom CSS property?

    How to use Sass mixin transition for applying transition-delay only?

    How can i get bootstrap to alter page CSS instead of lay dormant?

    How to simplify cross-browsing css animation keyframe?

    CSS3 Slideshow: How to display a text for each image?

    How to make HTML pages print at a consistent size from Chrome?

    How do I center a menu option under it's heading option in a drop down menu?

    How is “:after” element's height and width determined? [closed]

    How do you select a radio button in css?

    How to make text labels stick next to an image in CSS?

    How to make the header part of the site as low as the logo?