CODEWITHSUNDEEP
csshtml
Peter Donaghey
Peter Donaghey

Reputation: 1

{float: left;} Not working

Hey I was just trying to put two divs beside each other, like I've done hundreds of times by using "float: left" but it's simply not happening. The second div just sits below the first.

Here's the code:

<div id=wrapper" style="overflow: hidden; width: 1000;">
<div id="box1"  class="greybox">
    Right
</div>

<div id="box2" class="greybox">
Left
</div>
</div>

and the css:

#box1 {
margin-top: 70;
margin-left: 85;
width: 440px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px
float: left;
overflow: hidden;
}

#box2 {
margin-top: 70;
margin-left: 30;
width: 20px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
overflow: hidden;
float: left;
}

Any help would be much appreciated.

Upvotes: 0

Views: 7816

Answers (6)

user2732875
user2732875

Reputation: 269

You should clean that code up mate. Lots of errors, missing (px's), semicolons, quotes, etc...

<div id="wrapper" style="overflow: hidden; width: 1000;">
    <div id="box1"  class="greybox">Left</div>
    <div id="box2" class="greybox">Right</div>
</div>

#box1 {
width: 440px;
height: 450px;
padding: 1px 20px 0 40px; /* Order = Top, Right, Bottom, Left */
margin: 70px 0 0 85px;    /* Cleans up your code by eliminating margin-top, margin-right, margin-bottom, margin-left and same applies with padding */
float: left;
overflow: hidden;
}

#box2 {
width: 20px;
height: 300px;
padding: 1px 0 0 0;
margin: 70px 0 0 30px;
overflow: hidden;
float: left;
}

Demo : http://jsfiddle.net/ZFTzY/5/

Upvotes: 0

hula bula
hula bula

Reputation: 26

why u put overflow:hidden to #box1 and #box2 ? do u know the use of {overflow:hidden;}

u already put overflow:hidden to main wrapper

see this 

<div id="wrapper" style="overflow: hidden; width: 1000px;">
<div id="box1"  class="greybox">
    left
</div>

<div id="box2" class="greybox">
Right
</div>
</div>

and the css

 #box1 {
    margin-top: 70px;
    margin-left: 85px;
    width: 440px;
    height: 450px;
    padding-left: 40px;
    padding-top: 1px;
    padding-right: 20px;
    float: left;
    background:orange;

    }

    #box2 {
    margin-top: 70px;
    margin-left: 30px;
    width: 20px;
    height: 300px;
    padding-left: 0px;
    padding-top: 1px;
    background:green;
    float: left;
    }

see the jsfiddle

Upvotes: 0

Meximize
Meximize

Reputation: 70

Usually this is a problem when the width of the second element will not fit horizontally within the parent. Does the greybox class add any padding?

Also, in your paste the wrapper id is missing a quote. This would give the parent no width if it was styled via a stylesheet include rather than inline and yield the problem I describe.

Also, the box1 styles have a syntax error in padding. All styles below wouldn't take effect. This should be your fix.

Upvotes: 1

Netsurfer
Netsurfer

Reputation: 5542

You have lots of typos in your code. Missing double quotes and semicolons. Additionally you forgot many times to give your values also an unit (like px).

If you'll fix all these errors all work as expected - see jsFiddle

Upvotes: 0

mpen
mpen

Reputation: 282875

You're missing a double-quote around your "wrapper" id.

I discovered this by attempting to make a fiddle out of your code, which highlighted the error. (Hint: make a fiddle for us next time)

You also had some errors in your CSS, and your widths were all weird.

Fixed:

<div id="wrapper" style="overflow: hidden; width: 1000;">
        <div id="box2" class="greybox">Left</div>
    <div id="box1" class="greybox">Right</div>

</div>

#box1 {
    margin-top: 70;
    margin-left: 85;
    width: 200px;
    height: 450px;
    padding-left: 40px;
    padding-top: 1px;
    padding-right: 20px;
    float: left;
    overflow: hidden;
}
#box2 {
    margin-top: 70;
    margin-left: 30;
    width: 40px;
    height: 300px;
    padding-left: 0px;
    padding-top: 1px;
    overflow: hidden;
    float: left;
}

You can either float both boxes left to have them side by side, or float one right.

Upvotes: 3

Eyal Elmakies
Eyal Elmakies

Reputation: 21

Why something will happen? item's auto float is left.

Maybe you mean to

float: right;

try this one ^^

Upvotes: 1

Related Questions