CODEWITHSUNDEEP
htmlcss
Cvjetko
Cvjetko

Reputation: 33

divs on left and right side

a bit vague. I use news system, on left side i want to get news from world, on right i wont to get news from my country. I really don't know how to solve this problem:http://i48.tinypic.com/15rxzkw.jpg

source:

<div style="width:1000px;">
    <div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>

 <div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>

  <div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>

   <div style="border:1px solid red;float:left;width:400px;">news from world</div><br/> <br/>

   <div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>


    <div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
    <div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
    <div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
    <div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
</div>

Upvotes: 2

Views: 1640

Answers (3)

skub
skub

Reputation: 2306

You could try this:

    <div style="width:1000px;">

   <div style="float:left;">
    <div style="border:1px solid red;width:400px;">aaaaaaaa</div><br/><br/>
    <div style="border:1px solid blue;width:400px;">bbbbbbb</div>
    </div>
     <div style="float:left;">
    <div style="border:1px solid blue;width:400px;top:0px;">cccccccc</div>
    <div style="border:1px solid blue;width:400px;">dddddddddd</div>
    </div>

    </div>

Upvotes: 0

wless1
wless1

Reputation: 3549

You need a to clear your floating divs. Put this :

<div style="clear: both;"></div>

http://www.quirksmode.org/css/clearing.html

For example:

<div style="width:1000px;">
<div style="border:1px solid red;float:left;width:400px;">aaaaaaaa</div>
<div style="border:1px solid blue;width:400px;float:right;">bbbbbbb</div>
<div style="clear: both"></div>
<div style="border:1px solid blue;width:400px;float:left;top:0px;">cccccccc</div>
<div style="border:1px solid blue;width:400px;float:right;">dddddddddd</div>
</div>

Upvotes: 3

Chris Visser
Chris Visser

Reputation: 1647

Its because of the <br /><br />

Remove them because they push element 2,3 and 4 2 rules down.

Also try to separate styles from your html and never use <br /> for styling. (W3C semantics)

Upvotes: 1

Related Questions