2 replies [Last post]
rashed_karim
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2006-09-25
Posts: 2
Points: 0

Hi everyone,

I am trying to create a page layout as shown in the image attached below (towards the end of this post) using the following CSS code:

#pagecontent { width:750px; margin: 0px auto 0; text-align:left; background:#fff; }

#top-left-header {
width: 512px;
height: 14px;
margin: 5px 0px 0px 0px;
float: left;
background: url(../images/graphics/leftContentBoxHeader2.gif) no-repeat;
padding: 0px;
}

#top-left-body {
width: 500px;
margin: 0px 0px 0px 0px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
text-align: left;
border: 1px none #006600;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
padding: 0px 5px 5px 5px;
float: left;
clear: left;
}

#top-right-header {
width: 232px;
height: 14px;
margin: 5px 0px 0px 0px;
float: right;
background: url(../images/graphics/topRightContentBoxHeader.gif) no-repeat;
padding: 0px 0px 0px 0px;

}

#top-right-body {
width: 220px;
margin: 0px 0px 0px 5px;
font-family: verdana, arial, sans-serif;
text-align: left;
border: 1px none #006600;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
padding: 0px 5px 5px 5px;
float: right;

}

And, the following HTML code



Here is some content

some more content







some more content





The problem with this is that I seem to get an unwanted whitespace on top of the top-right corner box, as indicated in my image (marked in red). The space doesnt show in IE, but it appears in Mozilla Firefox. Any ideas as to why this is happening?

Any help will be appreciated,

Rashed

AttachmentSize
question-to-forum.JPG31.13 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not tested. Alternate your

Not tested.

Alternate your float elements right and left.

<div id="pagecontent">
  <img src="images/experimental/blackboard4.jpg">

  <div id="top-left-header"></div>
  
  <div id="top-right-header"></div>

  <div id="top-left-body">
    Here is some content<br />
    some more content
  </div>
  
  <div id="top-right-body">
    some more content
  </div>
</div>

And, don't use the clear property.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

rashed_karim
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2006-09-25
Posts: 2
Points: 0

Thanks!

Hey Gary,

Thanks a million! it works now both in IE and Mozilla.