How can I do this?

Luke · 06-02-2011, 07:34 PM

Right, firstly, here's my code:

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
#wrapper {
    width:100%
}
#left {
    width: 300px;
    height : 300px;
    float: left;
    background-color:#F63;
}
#main {
    width: 100%;
    background-color:#09F;
    height:300px;
    float: right;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="left"></div>
<div id="main"></div>
</div>
</body>
</html>

Wrote it up in a minute to find out the answer first.
What happens, is the orange block is there, as correct, but the blue block, goes UNDERNEITH the orange block, because it's obviously trying to fill 100% of the screen width, which I defined.

What i want it to do, is fill 100% of what's left to the right of the orange block. If you get me. Can't set a pixel, cause it would differ on screen resolutions, so how would I go about that?

Many Thanks
Luke

hamheyelliot · 06-02-2011, 08:31 PM

Just remove float: right; from the ID main and the blue block will flow around it like you mentioned.

Float works by allowing other elements to flow around something, so if 'left' has a left float and 'main' has a right float, essentially neither wants to go around the other, so they simply break into individual lines.

Hope that's some help!

Luke · 06-02-2011, 08:36 PM

Ahh, perfect! Thanks!

Luke · 06-02-2011, 09:30 PM

Edit: Turns out it wasn't perfect, they're not going side by side as it happens; the blue is just going behind the orange..

So, again, any ideas?

Thread: How can I do this?

Thread Tools

How can I do this?

Posting Permissions