- This topic is empty.
-
AuthorPosts
-
June 21, 2009 at 8:40 am #25221deathtoieMember
I have a layout that is 1024px except for 1 div that I would like to be 100% width of the browser window – much like the header and footer of this site. I have attached 2 images since I cant post a link – the ie6 image is what is happening that I would like some assistance remedying the other image is how it should look and does look in FF,IE7,Safari,Opera etc.
Here is my Xhtml:
Code:
New Design
Here is my CSS:
Code:body
{
font-size: 90%;
font-family: helvetica, georgia, sans-serif;
line-height: 1.6em;
text-align: center;
color: #fff;
background-color: #686963;
width:100%;
margin:0;
}div#container{
width:1024px;
margin: 0 auto;
background-color: #fff;
height:2000px;
}div#header{
background-image: url(../images/header-bg.jpg);
background-repeat: repeat-x;
width: 1024px;
height:100px;}
img.logo{
float:left;
margin: 5px 0 0 5px;
}div#contactBox{
float:right;
background: url(../images/contact-drop.jpg) no-repeat;
width:380px;
height:50px;
margin-right: 25px;
}
div#tabs{clear:both;}
div#subnav{
background-color: #99cc66;
width: 1024px;
height: 30px;
border-bottom: 3px solid #42423f;
}div#scroller{
margin-top:20px;
background: url(../images/sliderbg.jpg) repeat-x;
height:250px;
position: absolute;
left: 0;
right: 0;
width:100%;
}The div that I would like to expand 100% of the browser is div#scroller.
Thanks in advance for looking – Please let me know if you need anything else.
Thanks!
June 21, 2009 at 9:54 am #59414apostropheParticipantIs this a spot the difference competition? ‘Cos I’m damned if I tell the two pictures apart.
I can tell you that #scroller will only be 100% width of its parent div which is #container. If you want it to span the browser window take it out of the container div.June 21, 2009 at 10:03 am #59415deathtoieMemberI have tried what you mentioned prior to posting to the forum – it doesnt seem to matter if I set the parent div to 100% or to 1024px inside or outside of a parent div – ie6 returns this everytime – it seems as though the image doesn’t repeat like the other browsers.
[attachment=1]Picture 2.png[/attachment]Here is all other browsers and exactly what I want to achieve.
[attachment=0]all-others-proper-look.png[/attachment]Thanks for the prompt reply – I see in order to get the image to show more than the given width in the forum – you have to place it inline – thats why the two images looked the same.
Thanks!
June 21, 2009 at 10:44 am #59419apostropheParticipantStill not absolutely sure what your trying to do. A link would be great help.
I repeat, anything that you want to span the entire browser window cannot be inside a 1024px div. Have you validated your markup? If what you posted is an accurate representation of your page you have an unclosed div in there.June 21, 2009 at 12:47 pm #59430lookslikepatMemberMaybe this won’t help much, but I came to think of "declaring a width and 100%", and how that isn’t the same thing, if that could be it (sorry I’m just on my way out).
The box-model will make a div with no width declared as 100% of the browser-window, no matter what padding (and borders? ) you have.
However, setting it’s width @ 100% AND having padding as well, that will result in width (100%) + X amount of padding. I.e. more than 100%.I digress, gonna be late. Bye!
June 21, 2009 at 4:12 pm #59436deathtoieMemberApostrophe – So you are saying if I dont close a div wierd things can happen ? :( Thank you very much – note to self validate your code prior to taking screen shots and wasting others times with pointless posts.
Thanks again! :lol:
LooksLIkePat – thanks for the lesson as well – look forward to utilizing this forum more often great information from those on the board and I will try to not waste anyones time with nonsense like unclosed tags!
thanks again.
June 21, 2009 at 5:15 pm #59437apostropheParticipantQuote:Apostrophe – So you are saying if I dont close a div wierd things can happen ?In a nutshell, yes.
If you have one less closing div than you have opening divs then the browser has to take a wild guess as to which closing div matches which opening div. It may be obvious to you and me but computers ain’t that smart, especially ones running ie6. :D -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.