Float?

Discussion in 'CSS' started by Plutonic, May 2, 2007.

Thread Status:
Not open for further replies.
0
  1. #1
    On my site typobay.info there is two gray boxes for the header with writing in them, When you open it in Firefox they are sidebyside so it looks like one box, but in Internet explorer one box is under the other.

    Could this be because of the float?

    This is the .css for the boxes:

    }
#logo{
	float:left; width:190px; height:110px; background-color:#F7F7F7; border-left:solid 1px #999999;
}
#pagetitle{
	position:relative; float:left; width:608px; height:110px; background-color:#F7F7F7; border-right:solid 1px #999999;
}
#title{
	position:absolute; right:10px; bottom:0px; width:600px;
    Code (markup):
    Can anyone help me fix this?

    Thanks.
     
    Plutonic, May 2, 2007 IP
  2. silverblade

    silverblade Peon

    Messages:
    153
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I am using Internet Explorer 7 and Firefox 2 on a 1280x1024 resolution and I see the page exactly the same in both browsers...
     
    silverblade, May 2, 2007 IP
  3. Plutonic

    Plutonic Peon

    Messages:
    2,964
    Likes Received:
    85
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Really?

    The two titles:

    TypoBay and Welcome to TypoBay!

    Are they on the same row?
     
    Plutonic, May 2, 2007 IP
  4. silverblade

    silverblade Peon

    Messages:
    153
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    In both browsers it is like this:

    Typobay
    ------------------------------Welcome to TypoBay!
     
    silverblade, May 2, 2007 IP
  5. Plutonic

    Plutonic Peon

    Messages:
    2,964
    Likes Received:
    85
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yeah thats good, if it was:

    Typobay




    Welcom to TypoBay!


    Then it would be bad lol.
     
    Plutonic, May 2, 2007 IP
  6. Katy

    Katy Moderator Staff

    Messages:
    3,490
    Likes Received:
    513
    Best Answers:
    7
    Trophy Points:
    355
    #6
    It's messed up in my IE too. Instead of 2 divs (grey boxes) you could make one big div. Something like this:

    .box {
    width: 750px;
    height: 150px;
    background-color: #F7F7F7;
    border-left: solid 1px #999999;
    border-right: solid 1px #999999;}

    .title {
    font: bold 20pt Verdana, serif;
    padding-left: 20px;
    color: #000000;}

    .subtitle {
    font: bold 17pt Verdana, serif;
    float: left;
    display: inline;
    padding-left: 140px;
    color: #CCCCCC;}

    Then use:

    <div class="box">
    <div class="title">TypoBay</div>
    <div class="subtitle">Welcome to TypoBay!</div>
    </div>

    and you shouldn't get into trouble. Hope you get the hang of it. :)

    Kate
     
    Katy, May 2, 2007 IP
Thread Status:
Not open for further replies.