Positioning divs left and right within anohter div

Question

I am quite new to css and html, and I am having trouble floating divs within a another div, I've done quite a bit of research online but have not been able to come up with a solution.

these are the sites I have read and where of no use:

barelyfitz /screencast/html-training/css/positioning/

stackoverflow /questions/580195/css-layout-2-column-fixed-fluid

mirificampress /show.php?id=106

How to get Floating DIVs inside fixed-width DIV to continue horizontally?

My code can be found on jsFiddle here

Make sure you're closing your tags properly. Your divs don't have the correct closing tags, and hence they're not wrapping your content like I believe you expect them to. — kinakuta, Apr 27 '12 at 17:44
I removed floats to try something I found at http://www.positioniseverything.net/easyclearing.html — RLoniello, Apr 27 '12 at 17:47

score 2 · Accepted Answer · answered Apr 27 '12 at 17:46

2

I hope this will help. CSS:

#left, #right {
 width: 100px; //change this to whatever required
 float: left;
}

HTML :

<div id="wrapper">
    <div id="left">
       <p class="t0">lorum itsum left</p>
    <div>
    <div id="right">
       <p class="t0">lorum itsum right</p>
    <div>
<div>

answered Apr 27 '12 at 17:46

KBN

2,915
16
27

KinaKuta was correct, *sigh* the correct and simple way can be found at http://jsfiddle.net/CCAtj/ – RLoniello Apr 27 '12 at 17:53
I just found Stackoverflow, you guys are wonderful, now to get a editor instead of doing every thing with notepad... Good historical reference though for other noobs. Special thanks to KinaKuta and xFortyFourx – RLoniello Apr 27 '12 at 17:57

score 1 · Answer 2 · edited May 05 '17 at 14:27

Since you are a beginner. I will make it straight forward. Below is extraction of your code. I used internal style sheet. Your example you are using external style sheet. Using float attribute you can set it to left and right. Here is used float:left to alight one div to left and float:right to alight other one to the right. Each opened tag has to be closed tag.

    <head>
    </head> 
    <!--Internal style sheet-->
    <style>
    .left{
    float:left;
    }
    .right{
    float:right;
    }
    </style>

    <body>
    <div id="wrapper" >
        <div class="left">
            <p class="t0">lorum itsum left</p>
        </div>
        <div class="right">
            <p class="t0">lorum itsum right</p>
        </div>
    </div>
    </body>
    </html>

Additional note: If you want to adjust the size of left and right div then use width in style sheet. Refer the updated style sheet below. I made left div width to 80% of the screen width and right width to 20%.(total should be 100%). Adjust accordingly.Background color used to set the background color of the div.

.left{
float:left;
background-color:powderblue;
width:80%;
}
.right{
float:right;
width:20%;
background-color:yellow;
}

score 0 · Answer 3 · answered Apr 27 '12 at 17:43

Like this?

http://jsfiddle.net/Ev474/

<div id="wrapper">
    <div id="inner">
        <div id="left">
            Left Content
        </div>
        <div id="right">
            Right Content
        </div>
    </div>
</div>

div {
    height: 50px;
}
#wrapper {
    width: 200px;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #ccc;
}
#inner {
    width: 400px;
}
#left {
    width: 150px;
    float: left;
    background-color: #f00;
}
#right {
    width: 150px;
    float: left;
    background-color: #0f0;
}

Positioning divs left and right within anohter div

3 Answers3