473,322 Members | 1,425 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Gap In Float Layout

This should only take a second for a clever person but can somebody
please explain why there is a gap at the top of this layout. You'll see
what I mean when you view it.

Also, could you please explain why the gap disappears when :

a) I give the div#main a border
b) give the div#main some content prior to it's first <p>, eg: <div
id="main">test content
<p>Lor..etc..

Here's the page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple 2 column layout with footer</title>
<style type="text/css">
body
{
font-family: georgia;
margin:0;
}
h1
{
margin:0;padding:0;
}
div#header
{
margin:0;
background-color:#bff;
}
div#main
{
margin:0;
background-color:#b3f;
}
div#menu
{
margin:0;
width: 15%;
float: left;
background-color:#ebf;
}
div#footer
{
clear: both;
background-color:#ffb;
}

</style>
</head>
<body>

<div id="header">
<h1>The header</h1>
</div>

<div id="menu">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam
bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem.
Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem,
laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien
tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis
tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a,
lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.</p>
</div>

<div id="main">
test
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam
bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem.
Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem,
laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien
tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis
tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a,
lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.</p>

<p>Quisque posuere lobortis turpis. Aenean eu lacus. Donec sed lacus
eget dui rhoncus tempor. Pellentesque tellus tortor, mattis non,
posuere ac, mattis sed, diam. Maecenas accumsan libero sit amet libero.
Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit.
Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim.
Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate
dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero.
Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam
eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum,
vestibulum ut, interdum at, aliquam vel, felis.</p>

<p>Praesent imperdiet volutpat enim. Donec eget lectus. Morbi ornare
dui vel eros. Morbi sit amet magna. Proin a tortor et mi iaculis
cursus. Vivamus iaculis felis in justo. Donec dolor dolor, mollis et,
sodales eget, vestibulum id, sapien. Proin fringilla risus ut lorem.
Phasellus quis leo et sem tincidunt ultricies. Etiam dui lorem, gravida
ac, volutpat at, mollis eu, wisi. Nam iaculis cursus arcu. Donec
cursus, sem quis pulvinar bibendum, est leo sodales felis, sed laoreet
lectus nibh at lacus. Sed erat. Aenean volutpat lacus sit amet pede.
Duis nibh dui, tempor in, dictum non, ornare ac, ante. Nulla semper
eros in justo. Nulla vel mauris.</p>

<p>Suspendisse mi pede, feugiat non, volutpat ut, placerat vitae, urna.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nulla a tellus. Quisque dolor nisl, placerat a, mollis
ac, dignissim at, turpis. Curabitur wisi enim, commodo sit amet,
iaculis et, ullamcorper non, quam. Donec arcu arcu, adipiscing a,
tincidunt ut, laoreet non, eros. Proin bibendum gravida nisl. Nullam
scelerisque consectetuer magna. Nam interdum risus non tortor. Donec
eget sapien. In scelerisque, enim vitae porta vehicula, nibh ipsum
elementum ipsum, eget hendrerit urna enim eu libero. Donec ornare
lacinia diam. Phasellus venenatis lacus ac nulla. Integer euismod.
Praesent nec purus. Mauris eget magna.</p>

<p>Nullam vehicula, augue id imperdiet iaculis, tellus neque commodo
felis, ac aliquet risus nibh id nibh. Curabitur id odio non diam
pretium luctus. Curabitur volutpat libero vel dolor. Ut imperdiet quam
vel massa. Maecenas aliquam, diam nec dignissim accumsan, mauris mi
venenatis turpis, consequat vestibulum enim lorem quis nibh. Integer
bibendum pretium purus. Quisque ante. Nulla sed arcu. Etiam vel arcu.
Nunc varius. Maecenas elementum lacus sit amet arcu. Curabitur sagittis
gravida ipsum. Donec ac turpis. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Aenean aliquam
commodo diam. Duis viverra fermentum purus. Maecenas congue, sem non
luctus ultrices, diam wisi porta diam, in varius dolor nulla id ante.
Aliquam convallis volutpat nibh.</p>

</div>

<div id="footer">
The footer...
</div>

</body>
</html>

Feb 2 '06 #1
3 1510
oo******@yahoo.co.uk wrote:
This should only take a second for a clever person but can somebody
please explain why there is a gap at the top of this layout. You'll see
what I mean when you view it.

Add:
div#main p {
padding: 0.7em 0;
margin: 0 1em;
}
Adjust values to taste.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Feb 2 '06 #2

Great thanks.

Can you expain why the white gap appears?

The div#main has the purple background color, so why does the top
margin of the paragraphs within div#main affect the margin of div#main
and cause a white gap?

Jim Moe wrote:
oo******@yahoo.co.uk wrote:
This should only take a second for a clever person but can somebody
please explain why there is a gap at the top of this layout. You'll see
what I mean when you view it.

Add:
div#main p {
padding: 0.7em 0;
margin: 0 1em;
}
Adjust values to taste.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)


Feb 3 '06 #3
oo******@yahoo.co.uk wrote:

Can you expain why the white gap appears?

No. I have seen an explanation but I do not remember it or where I saw it.
Another solution is to add border-top to div#main and give the border
the same color as the background.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Feb 3 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Mike Irwin | last post by:
Here's the test page: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">...
0
by: Ned | last post by:
I am having trouble with a layout that I am trying to convert from table based layout to css based layout. I have included source code for a stripped down version. The problem is that when the...
5
by: Matt Bostock | last post by:
Hi, I'm a bit of a CSS newbie so please accept my apologies if this post is inappropriate. I can't get the 'latest news' title to move across to the right column where it belongs. Here's a...
16
by: Wolfgang Meier | last post by:
Hi, Although it might seem like I am firing out random posts in quick succession this matter is indeed one I thought about for quite some time without coming to a conclusion: Why is it that...
14
by: Mark | last post by:
please view http://mnbayazit.com/misc/sample.gif i'm wondering how i can make the sidebar (green) float to the right of the main text, without specifying the width of the main content (because...
1
by: impulsenine | last post by:
Hello all. I have yet another IE float drop challenge for you. I am aware that this comes up a lot, and I hope I'm not trying your patience by asking for help with it. The page has 3 columns,...
22
by: ashkaan57 | last post by:
Hi, I am trying to put text on left and right side of the page and used: <div> <span>blah blah</span> <span style="float:right">blah blah</span> </div> The 2nd text does go to the right but the...
10
by: mark | last post by:
I'm brushing up on my CSS, already running into problems with IE 6 The follow code should display two divs adjacent to each other within a container. The problem is in IE6 the left div starts a...
7
by: dzar | last post by:
I have an application that sends messages to other applications through PostMessage(HWND_BROADCAST, MY_MESSAGE_ID, wparam_float, lparam_float); in C (and this works... I can typecast and built byte...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.