CODEWITHSUNDEEP
csshtmlcss-position
Sivadinesh
Sivadinesh

Reputation: 157

CSS div stretching to full browser width

The output of this below code DIV #imagemiddle is not stretching till the browser full width, I want the top tool bar has to be fixed and the below div to be position: relative and not absolute or fixed.

HTML

<div id="topbar"></div>
<div id="imagemiddle"></div>

CSS

#topbar {
    position: fixed;
    display: inline-block;
    top: 0px;
    left: 0px;
    background-color: #2D2D2A;
    border-bottom: 2px solid rgba(0,0,0,0.2);
    height: 42px;
    width: 100%;
    z-index: 5;
    overflow-x: visible;
    overflow-y: visible;
}
#imagemiddle {
    position: relative;
    display: inline-block;
    top: 40px;
    background-color: #4D4D4D;
    border-bottom: 2px solid rgba(0,0,0,0.2);
    height: 44px;
    width: 100%;
    z-index: 0;
    overflow-x: visible;
    overflow-y: visible;
    background-color: "red"
}

Upvotes: 4

Views: 10559

Answers (2)

Carl0s1z
Carl0s1z

Reputation: 4723

A simple solution, you need add margin:0; to the body in your css. 

body{ margin:0;}

DEMO

Upvotes: 5

Shomz
Shomz

Reputation: 37701

Your browser's default body margin is the problem:

body {margin: 0;}

http://jsfiddle.net/E8uNY/

Consider using a reset spreadsheet or creating a custom one to avoid cross-browser CSS inconsistencies.

Also, when using words for CSS colors (red), don't put them inside quotes.

background-color: red;

Upvotes: 1

Related Questions