CODEWITHSUNDEEP
htmlcss
Mori
Mori

Reputation: 6770

Put two DIVs next to another DIV

How can I put the blue division on the right of the red & green ones?

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #red {width:100px; height:50px; background:red;}
            #green {width:100px; height:50px; background:green;}
            #blue {width:100px; height:100px; background:blue;}
        </style>
    </head>
    <body>
        <div id="red"></div>
        <div id="green"></div>
        <div id="blue"></div>
    </body>
</html>

I know how to do it by adding another div as a parent to the first and second divisions:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #parent {float:left;}
            #red {width:100px; height:50px; background:red;}
            #green {width:100px; height:50px; background:green;}
            #blue {width:100px; height:100px; background:blue; float:left;}
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="red"></div>
            <div id="green"></div>
        </div>
        <div id="blue"></div>
    </body>
</html>

But I wonder if I can achieve what I'm after without adding another HTML element.

Thanks in advance!

Upvotes: 0

Views: 2056

Answers (6)

A.M.K
A.M.K

Reputation: 16795

You can use the float attribute to make elements appear side-by-side.

UPDATE: You can achieve this effect with relative positioning, please see the demo and code below.

Demo: http://jsfiddle.net/SO_AMK/Frf6w/90/

HTML:

<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>​

CSS:

#red {
    width: 100px;
    height: 50px;
    background: red;
}

#green {
    width: 100px;
    height: 50px;
    background: green;

    float: left;
    clear: both;
}

#blue {
    width: 100px;
    height: 100px;
    background: blue;

    top: -50px;
    float: left;
    position: relative;
}

Upvotes: 3

user818991
user818991

Reputation:

Add float:left; to all your divs.

Upvotes: 0

Susan
Susan

Reputation: 1

Use the following code on the blue div:

style="float:left"

Upvotes: 0

Anthony
Anthony

Reputation: 427

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#red {width:100px; height:50px; background:red;}
#parent {float: left; }
#green {width:100px; height:50px; background:green;}
#blue {width:100px; height:100px; background:blue; float: left;}
</style>
</head>
<body>
<div id="parent">
<div id="red"></div>
<div id="green"></div>
</div>
<div id="blue"></div>
</body>
</html>

EDIT:

Made some changes to it. thing is: if u want red and green to be underneath eachother u kinda have to put them into an other division and float the other division next to it. Can you explain why exactly u would want it without parent?

Upvotes: 0

Dpolehonski
Dpolehonski

Reputation: 958

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body
{
    max-width:200px;
    margin:auto;    
}
#red {width:100px; height:50px; background:red; **float:left;**}
#green {width:100px; height:50px; background:green;**float:left;**}
#blue {width:100px; height:100px; background:blue;**float:right;**}
</style>
</head>
<body>
    <div id="blue"></div>
    <div id="red"></div>
    <div id="green"></div>
</body>
</html>

I've changed the body size to contain the 3 divs in the arrangment i think you were after.

There are lots of different methods, but this is the one I'd go for. (Doens't mean its better though)

Hope that helps :)

Upvotes: 0

OneChillDude
OneChillDude

Reputation: 8006

use 

style="float:left"

what this does, is it makes the divs take up as much space horizontally before taking up vertical space

Upvotes: 1

Related Questions