CODEWITHSUNDEEP
htmlcss
Cvjetko
Cvjetko

Reputation: 33

divs on left and right side without main div

I want to make 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>

I note that i cannot have main div on left and main div on right column/side.

Upvotes: 0

Views: 12784

Answers (4)

antejan
antejan

Reputation: 2624

Two br tags make something like 100% width block and prevent floats to stack horizontally.

You can avoid this problem by making the columns first and then place news blocks inside http://jsfiddle.net/yHWmv/

Don't forget to clear floats with wrapper with overflow:hidden or other clearfix.

html:

<div class="news">
  <div class="news-world">
    <div></div>
    ...
  </div>
  <div class="news-local">
    <div></div>
    ...
  </div>
</div>

css:

.news {
  overflow:hidden;
}
.news-world {
  float:left;
  width:30%;
}
.news-local {
  float:right;
  width:30%;
}
.news-world div,
.news-local div {
  border:1px solid red;
  padding:10px;
}

Upvotes: 1

AlecTMH
AlecTMH

Reputation: 2755

You can also add `display: inline' to each div (it's better to use a css file):

style:

.mainbox {
     width: 1000px;
}
.mainbox div {
     width:400px;
     display: inline;
}
.leftbox {
     float: left;
     border:1px solid red;
}
.rightbox {
     float: right;
     border:1px solid blue;
}
.clearbox {
     clear: both;
     height: 0;
     border: 0;
}

html:

<div class="mainbox">
     <div class="leftbox">news from world</div>
     <div class="rightbox">news from my country</div>
     <div class="clearbox"> </div>
     <div class="leftbox">news from world</div>
     <div class="rightbox">news from my country</div>
     <div class="clearbox"> </div>
     ...
</div>

Upvotes: 0

Панайот Толев
Панайот Толев

Reputation: 6607

Wrap all left divs in a <div class="left">. Wrap all right divs in a <div class="right">.

Ant then:

Upvotes: 0

cggaurav
cggaurav

Reputation: 575

Firstly, you can move all your styles to a CSS file.

What you want is to have the topmost div, with width say X, and position: absolute.

Then for the child left div, you have position:relative and right:50%;left:0 Then for the child right div, you have position:relative and right:0;left;50%;

Upvotes: 0

Related Questions