Grow your CSS skills. Land your dream job.

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

  • # May 7, 2012 at 12:11 am

    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;}

    # May 7, 2012 at 3:52 am

    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?!

    # May 8, 2012 at 3:15 am

    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.

    # May 8, 2012 at 4:18 am

    on this site you will find some great tutorials, i.e. http://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

    # May 14, 2012 at 12:54 am

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".