Need CSS HTML help.its about position:absolute,relative, float.

[axn700]

Trying to make a simple HTML page with a ContainerDiv containing a header div and another flashvid div . HeaderDiv contains a menu but the problem is if I am getting about 100px of white space between header div and flashdiv. here is my HTML and CSS code:

here is my CSS file:

body {text-align:center; background-color:white; font-family: Verdana, Geneva, sans-serif;}

#container{
position: relative;
width:1290px;
height:auto;
margin: auto;}

#container{
position: relative;
width:1290px;
height:auto;
margin: auto;}

#header{
position:relative;
height:150px;
background-color: grey;
-moz-border-radius-bottomright: 15px;
border-border-bottom-right-radius:15px;
-moz-border-radius-bottomleft: 15px;
border-border-bottom-left-radius:15px;}

#flash_content{
background-color: #010101;
float:left;
top:150px;
width: 1290px;
height:50px;
border-left: 5px #ffffff solid;
border-right: 5px #ffffff solid;
clear: right;
clear:left;
margin-top:200px;}

[timmey]

your “margin-top: 200px” is the problem, just remove it.

some other points:

1. top: 150px has no effect, would change if you add position: relative i.e.
2. clear: left and clear: right -> clear: both
3. your div#flash_content ist now 1300px wide, because border will be added
4. you dont need float:left there?!

[axn700]

Thank you very much Timmey. You have been of great help. By my CSS file you probably know I am just learning the css and may be that too in the wrong way. and Thanks for the additional points too. Thank you for the help.

[timmey]

on this site you will find some great tutorials, i.e. https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/ for positioning.

and if you cant find a solution, just ask again ;)

glad i could help

[axn700]

thanks that tutorial helped me a lot in understanding positioning thanks. You were really helpful :)

[Author]

Posts