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.
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;
}
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%;
Wrap all left divs in a <div class="left">. Wrap all right divs in a <div class="right">.
Ant then:
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>
Related
This is an excerpt from a much more complex problem, but the issue comes down to this: the code works on FF43, but not on IE11. After two days, I have determined that you can get the FF output to look like the IE output by reducing the width of the outer wrapper. I've tried variants on position, float, display, etc., all to no avail.
The goal was, as the content grows, to get the content div to resize horizontally first (expanding all the wrappers), and then to resize the content div vertically when the outer width limits are reached. Any ideas?
<!DOCTYPE html>
<style>
.wrapper { xwidth:480px; border:1px solid violet; }
.formbox { display: inline-block; font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; background: #FFFFFF; border:1px solid black; }
.row { display: block; border: 1px solid #ccc; margin:3px; padding:4px; clear:both; position:relative; }
.label { float:left; display:inline-block; width:120px; text-align:right; padding-right:4px; border:1px solid red; }
.icons { float:right; width:40px; border:1px solid red; text-align:center; }
.input { display:inline-block; border: 1px solid green; }
</style>
<div class="wrapper">
<div class="formbox">
<div class="row">
<div class="label">Label:</div>
<div class="icons">XX</div>
<div class="input">really long wide content really long wide content</div>
</div>
<div class="row">
<div class="label">Label:</div>
<div class="icons">XX</div>
<div class="input">really long wide content really long wide content</div>
</div>
<div class="row">
<div class="label">Label:</div>
<div class="icons">XX</div>
<div class="input">really long wide content really long wide content</div>
</div>
<div class="row">
<div class="label">Label:</div>
<div class="icons">XX</div>
<div class="input">really long wide content really long wide content</div>
</div>
</div>
</div>
fiddle: https://jsfiddle.net/des2016/r7x6d2tw/
How can I get a div with overflow: scroll; or overflow: auto; to scroll multiple contained divs?
If I have a single div, with a single child div, and the child div is wider than the container, then overflow:scroll; works great.
div.container {
overflow-x: scroll;
width: 150px;
border: 1px solid black;
}
div.inner2 {
width: 300px;
float: left;
}
<div class="container">
<div class="inner2">
ABCD1234WXYZ ABCD1234WXYZ
</div>
</div>
But if I have multiple inner floated divs, where each one is less than the width of the container, but in sum they are greater than the container, it wraps the floated divs.
div.inner {
width: 100px;
float: left;
}
div.container {
overflow-x: scroll;
width: 150px;
border: 1px solid black;
}
div.container:after {
clear: both;
}
<div class="wrapper">
<div class="inner">ABCD</div>
<div class="inner">1234</div>
<div class="inner">WXYZ</div>
</div>
How do I get it to append the floating divs horizontally and scroll?
jsfiddle here: http://jsfiddle.net/hw4ykza6/
Note that the contained divs will be resized at various times. I do not know in advance what the max or min width for them will be, only what they are now.
I think i've achieved what you want here (note i only applied my changes to your top example):
JSFIDDLE
The key things to note are:
I've added an inner wrapping element with class="inner-container" that is display:table-row
The elements of class inner now have display:table-cell
You don't need floats there. div.inner {display: table-cell;} will give you what you want:
div.inner {
width: 100px;
display: table-cell;
}
div.container {
overflow-x: scroll;
width: 150px;
border: 1px solid black;
}
<div class="wrapper">
<div class="inner">ABCD</div>
<div class="inner">1234</div>
<div class="inner">WXYZ</div>
</div>
You can also use a dispaly: inline-block; style and apply that style to all the child divs
e.g
<div style="width:300px; overflow-x:scroll; height:auto;">
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
</div>
Note:am using inline styling for explanatory purposes
You could try coding with less so you can get your heights as a single variable so u can then use later
Given the following HTML:
<!DOCTYPE html>
<html>
<body>
<div id="parent" style="border:1px solid #666;width:600px;height:200px;padding:5px;">
<div id="child1" style="border:1px solid #666;float:left;margin-left:10px;display:inline-block;">How<br>are<br>you?</div>
<div id="child2" style="border:1px solid #666;float:left;margin-left:100px;">How are you?</div>
<div id="child3" style="border:1px solid #666;float:right;margin-right:40px;">How are you?<br>How are you?<br>How are you?</div>
</div>
</body>
</html>
Is it possible to place the three child divs at the center of the parent div to make something like the following screenshot?
The height of child divs may change as the text inside changes, so it is not possible to use the properites top, margin-top and position:absolute to position the child divs at the center because the height of the child divs is not fixed, and as the height changes one would have to constantly change the value margin-top. Is there a better way to do this?
Here is a dynamic flexbox recreation of the image you posted. Hopefully it's similar to what you're looking for!
Screenshot:
Live Demo:
#parent {
display: flex;
justify-content: space-around;
border:1px solid #666;
width:600px;
height:200px;
padding:5px;
}
.child {
align-self: center;
}
.child > div {
display: inline-block;
border:1px solid #666;
}
<div id="parent">
<div class="child" id="child1"><div>How
<br />are
<br />you?</div></div>
<div class="child" id="child2"><div>How are you?</div></div>
<div class="child" id="child3"><div>How are you?
<br />How are you?
<br />How are you?</div></div>
</div>
JSFiddle Version: https://jsfiddle.net/hsrfxdo7/
HI now you can try to this way :-
display: table and display:table-cell property as like this
#parent{
display:table;
width:100%;
}
#child1, #child2, #child3{
display:table-cell;
vertical-align:middle;
text-align:center;
border:solid 1px red;
width:33%;
}
<div id="parent">
<div id="child1">How<br>are<br>you?</div>
<div id="child2">How are you?</div>
<div id="child3">How are you?<br>How are you?<br>How are you?</div>
</div>
I'm having trouble in aligning divs in my project. I'm expecting something like this:
but what i've done so far is like this one:
All divs have class "inline"
CSS:
div.inline{
float: left;
}
Thanks in advance.
why not something like this?
just a little adjustment to deepus code: though the width of the parent and children must be set to your standards
<html>
<head>
</head>
<style>
.inline
{
width:50px;
height:50px;
text-align:center;
border:1px solid black;
float:left;
margin:2px;
}
.main
{
width:120px;
}
</style>
</head>
<body >
<div class="main">
<div class="inline">div 1</div>
<div class="inline">div 2</div>
<div class="inline">div 3</div>
<div class="inline">div 4</div>
</div>
</body>
</html>
Simple:
div {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 4px;
}
div:nth-child(odd) {
clear: left;
}
See this fiddle: http://jsfiddle.net/QkruA/
go to old school way...clear:both
demo
css
div.inline{
float: left;
width:200px;
height:200px;
border:1px solid #000;
}
.clr{
clear:both;
}
html
<div class="inline"></div>
<div class="inline"></div>
<div class="clr"></div> <!-- taa daa...i love old schools methods :) -->
<div class="inline"></div>
<div class="inline"></div>
why don't you just use display:inline-block on each div
To make it easy for you for in the future add a class "left" and "right"
In this way you only have to make 2 very little css codes and you can use it every time you want something to set left or right (so you dont need to type this again every time you want to use it)
CSS code
.left
{
float:left;
}
.right
{
float:right;
}
.box
{
width:50px;
height:50px;
text-align:center;
border:1px solid black;
margin:2px;
}
.main
{
width:120px;
}
HTML code
<body >
<div class="main">
<div class="left box">div 1</div>
<div class="right box">div 2</div>
<div class="left box">div 3</div>
<div class="right box">div 4</div>
</div>
</body>
I have a div that contains inside 3 'floated' divs. The containing div has a line of text. The three floating inner divs also have a line of text.
When I specify text-align center for the outermost containing div, the three nested divs appear first, on one row next to each other left-to-right, and THEN the containing div's text appears to the right of the contained divs, centered in the space to the right of them.
Instead, I don't understand why the outermost containing div's text will not appear centered in the browser window, then below that the 3 contained divs and their text would appear. That's what I need to happen.
Here is the code. By the way I tried to embed a .jpg image into this question so you can see the problem -- anyone know how to display a screenshot or .jpg into a question here?
<head>
<style>
#myRowStyles
{
text-align:center;
margin-bottom:100px;
background-color:#b0e0e6;
border: 1px solid red;
}
#leftSide
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
#centerPiece
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
#rightSide
{
width:120px;
float:left;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
}
</style>
</head>
<div id="myRowStyles"><b>THIS IS THE TOP OF THE ROW</b>
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
<div style="clear:both">
</div>
<div id="myRowStyles"><b>THIS IS ROW #2</b>
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
First you have multiple same ID's on the page. That's bad. Change them to classes.
Second give myRowStyles a width.
I think that to make divs behave like tables you must define the display attributes in CSS:
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
So you will also need to add an extra <div> at the beginning for the container. I haven't tested this.
Also, I dont think you can make a single row span 3 columns when using DIVs so you must do something like this:
<head>
<style>
#container {
width:90%;
float:center;
margin-left:10px;
margin-top:30px;
border: 1px solid blue;
text-align:centre;
display: table;
}
#myRowStyles
{
text-align:center;
background-color:#b0e0e6;
border: 1px solid red;
display: table-row;
}
#leftSide,#centerPiece,#rightSide
{
width:120px;
margin-left:10px;
margin-top:30px;
border: 1px solid red;
display: table-cell;
}
</style>
</head>
<div id="container">
<div id="myRowStyles">
<div id="leftSide">
</div>
<div id="centerPiece"> Row 1
</div>
<div id="rightSide">
</div>
</div>
<div id="myRowStyles">
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
<div id="myRowStyles">
<div id="leftSide">
</div>
<div id="centerPiece"> Row 2
</div>
<div id="rightSide">
</div>
</div>
<div id="myRowStyles">
<div id="leftSide"> LEFT SIDE -- Leftie
</div>
<div id="centerPiece"> Centerpiece, Folks.
</div>
<div id="rightSide"> All Righty -- RIGHT SIDE
</div>
</div>
</div>
Try something like this: http://jsfiddle.net/We74E/2/