Overlapping text/images using % in CSS

@custardfaceJul 31.2008

if you see the site here =
~~[url]~~www.custardface.co.uk/ramsey[/url]

I have used % on the widths so that it adjusts for different screen res.

But ive noticed that when i use a % width for the text content it makes the images overlap

Sorry to be a pain but its really frustrating me ?

Hope all is well

Regards

to post a comment

HTML

18 Comments(s) _↴

@CentauriJul 31.2008 — #You get the overlap due to the absolute positioning.

To make this work fluidly, put #navigation [B]first[/B] in the html inside #wrapper, and float it as you have, but without the negative top margin. Follow this with #content1 with the left margin as you have, but [B]do not specify a height[/B] (or width) (IE stuffs up otherwise). Inside #content1, first will be #image, floated right. Following this will be #content, [B]again with no width or height set[/B], just a right margin. If the #image div might be higher than #content, then you may need to follow #content with a div set to clear:both as the last item inside #content1.

@custardfaceauthorJul 31.2008 — #ok great stuff i will get on this tongiht..

so because ive taught myself this stuff - i jsut want to clarify am i right in assuming that CSS works with DIVS as logically as

DIV1 / DIV2 / DIV3 < div 1 would come first then Div 2 then Div 3 etc

Hence my table being screwed up?? ?

@custardfaceauthorJul 31.2008 — #PS - i specified a height with the content1 as when i didnt the text just overlapped the footer

Is this because of the way i had coded the DIVS?

@CentauriJul 31.2008 — #Yes, that is also due to the absolute position of #content.

@custardfaceauthorAug 01.2008 — #Thanks for your help - but ive changed it per your example and now its completely screwed up!!! ?

www.custardface.co.uk/ramsey

@ThreeLetterSyndAug 01.2008 — #overflow: hidden;
Add to the img in your css. This way the images get hidden when they get conflicted. ?

Good luck ?

@custardfaceauthorAug 01.2008 — #ok thanks i will try this when i get home tonight!

So if this hides the images when they conflict, how do i sort my code out so that

NAV / CONTENT / IMAGES all show on the webpage and increase/decrease in size dependant on resolution of screen etc?

@CentauriAug 01.2008 — #Ok - sat down and had a play with this. Took about 15 minutes to get a layout working in FF & IE7, and many hours rehashing it to make stupid IE6 behave .....:mad: I rewrote the html a little more semantically, used better descriptive names for containers, and optimised the number of containers to a minimum. I also set up a separate stylesheet for IE6. The html I came up with is :

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Ramsey Vehicle Sales</title>
 <link href="ramsey.css" rel="stylesheet" type="text/css">
 <!--[if lt IE 7]>
 <link rel="stylesheet" type="text/css" href="ramseyie6.css">
 <![endif]-->
 </head>
 <body>
 <div id="wrapper">
 <div id="header">
 <h1>Ramsey Vehicle Sales - Home Page</h1>
 <p>Tel: 01487 710011</p>
 </div>
 <ul id="nav">
 <li><a href="index.html">Home</a></li>
 <li><a href="vans.html">Vans</a></li>
 <li><a href="pickups.html">PickUps</a></li>
 <li><a href="aboutus.html">About Us</a></li>
 <li><a href="motors.html">Ramsey Motors</a></li>
 <li><a href="find.html">Find Us</a></li>
 <li><a href="contact.html">Contact Us</a></li>
 </ul>
 <div id="contentwrap">
 <div id="detailbar">
 <img src="mainpage.gif" alt="Ramsey Vehicle Sales">
 <img src="mainpage.gif" alt="Ramsey Vehicle Sales">
 </div>
 <div id="content">
 <div class="tr"><div class="bl"><div class="br">
 <h2>Welcome to Ramsey Vehicle Sales.... </h2>
 <p>Big, small, side loading, rear loading, trafic's, transit's, vito's, vivaro's, berlingo's, scudo's there are loads of quality used vans at Ramsey Vehicle Sales </p>
 <p>Tell us what you need in a van and we'll find the right one for you.</p>
 <p>Low mileage light commercial vehicles & pick-up's, every single one comes with a great warranty and a full service.</p>
 <p> There's <strong>finance</strong> and <strong>leasing options</strong> available so your business vehicle can fit your business budget.</p>
 <h2>Used Vans</h2>
 <p>Please feel free to browse our <a href="vans.html">Stock Pages</a> and view our latest selection of used vans for sale. You may click on any vehicle photograph for a larger picture and additional details.</p>
 <p class="fineprint">We need your low mileage vans in part exchange or purchased for cash, Hire purchase account settled plus immediate decision. For further information please do not hesitate to contact us.</p>
 </div></div></div></div>
 </div>
 <div id="footer">
 <p>110-112 Great Whyte Ramsey, Cambs PE26 1HS</p>
 </div>
 </div>
 </body>
 </html>[/CODE]

As noted in my previous post, the navigation comes before the content wrapper, and the side detail bar comes before the content. I did not use a clearing div as this wreaked havoc in IE6. Also note that what will be the two images in the header are actually marked up as text, and the navigation menu is a list of links - much nicer for screen readers and search engine spiders.

The main css file I used for this is :

[CODE]* {
 margin: 0;
 padding: 0;
 }
 body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 border: 1px solid #4B4B4B;
 padding: 10px 0;
 }
 p {
 margin: 0 10px 10px;
 }
 #wrapper {
 margin: 0 auto;
 border: 4px solid #4B4B4B;
 padding: 10px 5px 5px;
 position: relative;
 width: 90%;
 min-width: 760px;
 }
 #header {
 height: 130px;
 margin-bottom: 15px;
 }
 #header h1 {
 width: 350px;
 height: 130px;
 float: left;
 font-size: 1px;
 color: #FFFFFF;
 background-image: url(headernew.gif);
 }
 #header p {
 margin: 0;
 width: 372px;
 height: 117px;
 float: right;
 margin-top: 13px;
 font-size: 1px;
 color: #FFFFFF;
 background-image: url(tel.gif);
 }
 #nav {
 width: 120px;
 padding-bottom: 87px;
 float: left;
 background-image: url(service.gif);
 background-repeat: no-repeat;
 background-position: left bottom;
 position: relative;
 margin-right: 5px;
 }
 #nav li {
 list-style: none;
 border-bottom: 1px solid #FFF;
 }
 #nav a {
 color: #FFFFFF;
 background-color: #3F5FC1;
 display: block;
 padding: 10px;
 text-decoration: none;
 font-weight: bold;
 line-height: 17px;
 }
 #nav a:hover {
 color: #3F5FC1;
 background-color: #CACACA;
 }
 #contentwrap {
 margin: 0;
 border: 1px solid #8488B0;
 overflow: hidden;
 padding: 5px 5px 5px 10px;
 }
 #detailbar {
 width: 270px;
 float: right;
 margin-left: 5px;
 }
 #detailbar img {
 margin-bottom: 1em;
 }
 #content {
 background-color: #CACACA;
 background-image: url(tl.gif);
 background-repeat: no-repeat;
 background-position: left top;
 overflow: hidden;
 border-top: 5px solid #FFF;
 }
 #content .tr {
 background-image: url(tr.gif);
 background-repeat: no-repeat;
 background-position: right top;
 }
 #content .bl {
 background-image: url(bl.gif);
 background-repeat: no-repeat;
 background-position: left bottom;
 }
 #content .br {
 background-image: url(br.gif);
 background-repeat: no-repeat;
 background-position: right bottom;
 padding: 10px 5px;
 position: relative;
 }
 #content h2 {
 font-size: 16px;
 letter-spacing: 1.5px;
 color: #3F5FC1;
 text-decoration: underline;
 margin: 0 0 10px 4px;
 }
 #content .fineprint {
 color: #3F5FC1;
 font-size: 10px;
 font-family: tahoma;
 font-style: italic;
 }
 #footer {
 background-color: #333333;
 color: #FFFFFF;
 text-align: center;
 padding: 5px;
 margin-top: 5px;
 }
 #footer p {
 margin: 0;
 font-size: 12px;
 }[/CODE]

Discussion of this continues next post

@CentauriAug 01.2008 — #The css starts with the universal selector to zero default margins and padding.

The main #wrapper div is set to a minimum width to avoid the two header images colliding, and padding gives the spacing to internal elements. I find that using padding on the parent element instead of margins on the child element to provide space, plays MUCH nicer with IE, especially IE6. (hence also the top & bottom padding on the body).

The #header div simply gets a height and bottom margin for spacing. The <hi> heading is given the appropriate size, floated to the left and has the logo image as its background - the text itself is hidden by making it small and colouring it the same as the background. The phone number <p> is treated the same way, except floated right.

The #nav menu <ul> is given a width and floated left. The service graphic I applied as a background to the bottom of the <ul>, and the bottom padding makes room for it. The <ul> also gets a right margin here to space the content area away - I found that IE6 gave LOTS of problems if the margin was on the content area instead. The <li>s are stripped of bullets and get a bottom border as the separator line. The <a>s are styled pretty much as you had them.

When using a variable width container next to a float, I quite often just specify a side margin large enough to slide behind the float. However, as IE6 was not going to work with a clearer div inside the content wrap, the other option is to set the overflow property so that it surrounds internal floats, but then FF will not allow a side margin to slide behind the menu. Therefore, the #contentwrap gets no margins. If we set a small left margin here, FF would use this to space away from the menu, but IE7 will slide the margin (but not the div itself) behind the menu - hence the margin is on the #nav instead. Padding on #contentwrap provides internal spacing.

The right sidebar is floated to the right inside #contentwrap, and also gets a left margin for exactly the same reasons #nav got a right one. Bottom padding on the sidebar images provides space between them without inserting empty paragraphs in there.

The #content div itself just sits in position with no margins now, and is forced to not slide behind the sidebar using the overflow property (which will also allow you to put floated content in there). The first corner image is applied as a background here, with the rest as backgrounds on the nested divs like you had it set up. I used a top border to space the #content down a bit to match the sidebar graphics, as IE7 would just ignore a top margin here.

The rest is pretty much self-explanatory.

This works nicely in FF & IE7, but it should come as no surprise that IE6 has problems - the IE6 css is next post.

@CentauriAug 01.2008 — #The ramseyie6.css file looks like :

[CODE]#wrapper {
 width: expression((this.parentNode.offsetWidth < 845) ? "760px" : "90%");
 }
 #nav li {
 float: left;
 width: 100%;
 }
 #contentwrap, #content, #nav a {
 height: 1%;
 overflow: visible;
 }
 [/CODE]

As IE6 does not understand min-width, we make use of the proprietory IE expression to dynamically set the width of #wrapper if the body is less than a set value.

IE6 also does not like block level <a>s of undefined width inside <li>s, and will put a stack of space between them. Usual fix is to float the <li>s and set the width to 100% (of the <ul> ).

Whilst setting the overflow property to hidden forces a container to surround floats in modern browsers, IE6 doesn't know that. Triggering HasLayout in IE will achieve the same result, and setting a size dimension will trigger HasLayout. Fortunately, IE6 treats height like min-height, so we can safely set a small height on #contentwrap and #content to make them surround internal floats - but the overflow must be reset as well.

IE6 also needs HasLayout set on <a> links that are block level, otherwise only the text area is clickable, so the #nav <a>s are added to the css to get a small height.

Have fun.

BTW, if the #detailbar div is omitted from any other pages, #content will automatically fill the width.

@custardfaceauthorAug 04.2008 — #OH MY GOSH you have completely spent hours on this for me and that is sooo nice of you!! ?

Do you want anything for it? is there anything i cn help you with etc?

I will upload the files to my webserver tonight and trial it... I cant believe this you are amazing!!!

@custardfaceauthorAug 04.2008 — #thank you so much Ive uploaded the files and done a few edits on some pages and its looking really good in both IE and firefox, i cant believe it.

But i can see what you have done compared to what i did = so therefore learning by my mistakes.

Not bad though considering i taught myself ? haha

@custardfaceauthorAug 08.2008 — #this doesnt work in IE6 - do we have any reason?

@CentauriAug 08.2008 — #Have you uploaded the ramseyie6.css file? - I don't seem to be able to access it.

@custardfaceauthorAug 13.2008 — #yeah i uploaded the file but in the HTML you put if IE 7 then use IE 6 .css

could this be the reason?

http://www.custardface.co.uk/ramsey/ramseyie6.css

@CentauriAug 13.2008 — #The conditional comment reads[CODE]<!--[if [COLOR="Red"]lt[/COLOR] IE 7]>[/CODE]which means if [B]less than[/B] IE7. The site seems to work fine in IE6 for me now.

@custardfaceauthorAug 13.2008 — #ok i will try it again later on, it didnt show up correctly for me earlier which was bizarre!!!! ?

@custardfaceauthorAug 15.2008 — #I think it is working fine, im not sure what happened when i looked at it the other day it came up rather ODD, but there you go!

The problem is now resolved. Thank you for your help.

Also in #HTML _↴

Ecommerce Web Design Help HTML navigation bar the best place where I can get my work done

Success!

Help @custardface spread the word by sharing this article on Twitter...

Tweet This

Overlapping text/images using % in CSS

18 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Overlapping text/images using % in CSS

18 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #HTML _↴