Can't figure out why block won't float_问答_开发者

开发者 https://www.devze.com 2023-04-12 20:54 出处：网络

I have a problem with CSS floating Here you can see what it looks like: http://migo.no/help/help.php Basically, I have two divs and I need the last one to float left. It\'s important that the last

相关专题：css

I have a problem with CSS floating

Here you can see what it looks like:

http://migo.no/help/help.php

Basically, I have two divs and I need the last one to float left. It's important that the last div floats left.

HTML code:

<div id='wrapper'>

    <div id='block1'>block1</div>
    <div id='block2'>block2</div>

</div>

CSS code:

#wrapper {
    overflow: hidden;
    background: red;
}

#block1 {
    background: yellow;
}

#block2 {
    background: gree开发者_StackOverflown;
    float: left;
}

I don't understand why it won't float left, and I have been trying to figure this out for a while now.

Best of regards, Alexander

Did you close the wrapper div? Also you don't have block 1 floating left. from your link it appears that Block 2 is floating left. Do you have a more descriptive Idea of what you want to accomplish?

block2 is clearing block1 and floating left. If you want block2 to show up on the left side of block1 you'll need to either make block2 come before block1 in the html, or float block1 to the right. Please be sure to read through the CSS spec.

The div is floating left.

If you want the divs to be beside each other, you'll have to specify a width for them both and set them both to float left, like Jason suggested.

Actually you don't really need the width for the blocks (1 and 2), but you can use it if it's necessary for the crossbrowser. What you have to do is to float the block1 to the left side also.

#block1 {
float:left;
    background: yellow;
}
#block2 {
    float: left;
    background: green;
}

I just did test it on my machine (FFox, IE7, 8 and 9) and it's working fine, once you float the block1 to the left side.

Which Browser are you using for this? and are you using the Standard or the Quirksmodus?

This way it works:

<html>
<head>
</head>
<body>
<style>
#wrapper {
    overflow: hidden;
    background: red;
}

#block1 {
    background: yellow;
}
#block2 {
    background: green;
    float: left;
}
</style>
<div id='wrapper'>
    <div id='block2'>block2</div>
    <div id='block1'>block1</div>
</div>
</body>
<html>

Set "float:left" to 1st div also which should solve the issue

Floats usually need an explicit width set.

If you want both divs beside each other, then you need to give widths to each and float then both.

Also, overflow: hidden; will clear the float, so if you are expecting the div to float outside the wrapper, it won't happen.