CODEWITHSUNDEEP
htmlcss
Barka
Barka

Reputation: 8932

why is the background color of my containing div not going across the page?

consider the following: http://jsfiddle.net/MgZ7n/10/

I want the entire hd to be highlighted in blue. That is from the left content all the way to the right content. How do I achieve that without setting the width of the hd element to 100%.

Note: setting the width to 100% causes a strange bug in Chrome where if the browser is set at full screen, the content of the right element ends up bleeding to the right and part of it ends up off screen.

Thanks!

Upvotes: 2

Views: 571

Answers (5)

dfsq
dfsq

Reputation: 193291

What about this (if you really need fixed position and no width 100%):

#hd {
    background-color:blue;
    position:fixed;
    right: 0;
    left: 0;
}

http://jsfiddle.net/MgZ7n/17/

Upvotes: 2

cherry3
cherry3

Reputation: 79

I changed the css to the following to fix your problem (deleted the fixed position on #hd and removed the fload typo):

#hd
{
    background-color:blue;
}
#left, #center
{
    float:left;
}
#right
{
    float:right;
    position:fixed;
    right:10px;
    top:0px;
}

I'm not sure what your purpose is with this layout but I think it's available for some improvements.

I would recommend using div instead of span for the 3 content columns.

When using div the elements you can style those div's according to your needs and then place the content inside those divs. With your css you can align your content divs nicely next to eachother with float or with display: inline-block

Upvotes: 0

Ninja
Ninja

Reputation: 5152

Remove position: fixed from #hd in the css. The blue will extend fully.

Upvotes: 0

GuZzie
GuZzie

Reputation: 974

Delete the fixed position from the hd style in your css

#hd
{
    background-color:blue;
    /*position:fixed;*/
}

*note: there's a typo in your fiddle, in the CSS section the #left, #center style says fload instead of float

Upvotes: 0

Andrew Jackman
Andrew Jackman

Reputation: 13966

I made this simple change:

#hd
{
    background-color:blue;
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#right
{
    float:right;
    margin-right: 10px;
}

to #HD and in chrome I don't see a bleed off. Here is my jsFiddle

I also changed your span id="right" because you float it and you set it to position fixed. Those kind of override each other (I assume position wins). A solution for you is to give it float: right and a margin-right: 10px.

Upvotes: 0

Related Questions