Results 1 to 5 of 5
  1. #1
    Seven001 Guest

    CSS woes (with floats)

    I have been fighting with CSS all day long trying to get it to do what I want, to no avail. Basically, what I want the page to look like this (used tables to demonstrate):

    sixpointnine.net/test/tables.html

    I realize that I could have just went with the tables and moved on, but the whole point of this exercise is to familiarize myself with CSS. Something that has not gone all that well, which is the reason I'm now hoping someone can point out whatever mistake I have managed to overlook/not find the answer to for the past few hours. Anyway, here's what I've ended up with:

    sixpointnine.net/test/index.html

    The problem lies in trying to float the two images at the top, to opposite sides. I have tried so many ways to accomplish it, but all have failed. Many thanks to anyone that can shed some light on this for me.

  2. #2
    Join Date
    Jan 2006
    Location
    Athens, Greece
    Posts
    1,479
    You should re-cut the images, removing the black space. Then figure their position with margins.

    What you are missing is the floating "clear".
    Use this as the end element of the div that contains the floating elements:
    br.clear { clear: both; font-size: 1px; line-height: 0; }

    <br class="clear" />

  3. #3
    Seven001 Guest
    Theres not as much black space as there appears to be. What looks like it's part of the images is actually the background color I've set on the DIVs.

    I tried your suggestion with the line break, and it didn't work unfortunately. It changed the look, but it's still not the desired effect. Thanks for the reply though.

  4. #4
    Join Date
    Jan 2006
    Location
    Athens, Greece
    Posts
    1,479
    You didn't put it in the correct place.... anyway:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Title Here</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    body {
        font:10pt Verdana, Arial, Helvetica, sans-serif; color:#000000;
        background:#999999;
        padding:0px;
        margin:0px;
        text-align:center;
    }
    div#container {
        width: 100%;
    }
    div#header {
        width: 80%;
        margin: 0 auto;
        border: 2px solid #FF9900;
        background-color: #000;
        border-bottom: none;
    }
    a {
        text-decoration:none;
        font-weight:bold;
        color:#FFCC00;
    }    
    pre {
        font-size:11px;
        color:blue;
    }
    .top {
        padding:0px;
        width:100%;
        border-bottom:2px solid #FF9900;
        background:#666666;
    }
    div#header img.left
    {
        float: left;
    }
    div#header img.right
    {
        float: right;
        margin: 30px 10px 0 0;
    }
    .mid
    {
        margin-left:auto;
        margin-right:auto;
        width:80%;
        height:100%;
        background:#000000;
        text-align:right;
        border-left:2px solid #FF9900;
        border-right:2px solid #FF9900;
    }
    div#container div.line
    {
        border-bottom: 2px solid #FF9900;
    }
    br.clear { clear: both; font-size: 1px; line-height: 0; }
    </style>
    </head>
    <body>
        <div id="container">
            <div class="line">
                <div id="header">
                    <img src="index_files/dumbylogo.png" alt="" class="left" />
                    <img src="index_files/swatch.png" alt="" class="right" />
                    <br class="clear" />
                </div>
            </div>
            <div class="mid"><a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a>&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
    </body>
    </html>
    Cheers

  5. #5
    Seven001 Guest
    Okay, that did indeed work to fix it. Even better, I'm pretty sure I understand where I went wrong as well. Thanks a lot for the help.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •