Reputation: 33
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
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
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
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