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/
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/
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 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>
Basically, I want two different elements in the leftmost area of a div, and two for the rightmost area of a div.
However if I use float:left and float:right twice, I get the following:
ELEMENT ELEMENT
ELEMENT ELEMENT
rather than
ELEMENT ELEMENT
ELEMENT ELEMENT
This is because, when I float for the second time the css floats for the remaining space left.
How do I fix this bug?
You can use clear:both; with float:left; property.
Try Jsbin demo
.left {
float:left;
width:40%;
height:240px;
border:1px solid red;
}
.right {
float:right;
width:40%;
border:1px solid red;
height:240px;
}
.elem1 {
float:left;
margin-bottom:20px;
}
.elem2 {
float:left;
clear:both;
}
.elem3 {
float:left;
margin-bottom:20px;
}
.elem4 {
float:left;
clear:both;
}
<div class="left">
<div class="elem1">element 1</div>
<div class="elem2">element 2</div>
</div>
<div class="right">
<div class="elem3">element3</div>
<div class="elem4">element4</div>
</div>
What you need is a clear: both in your CSS.
Your floats are working fine, but there is not enough content to push the next elements below the first elements. If you set them to clear, then they will.
Try this one:
Markup:
<div class='clear:both'>
<!-- left container -->
<div style = "float:left;">
<div style = "float:left;">
Element
</div>
<div style = "float:left; clear:left;">
Element
</div>
</div>
<!-- right container -->
<div style = "float:right">
<div style = "float:right;">
Element
</div>
<div style = "float:right; clear:right;">
Element
</div>
</div>
Please use your own external style, this is just to guide you.
Please have a look here on jsfiddle
.wrapper {
height:100px;
border:1px solid red;
margin: 5px;
}
.left {
margin: 10px;
float:left;
width: 45%;
}
.right {
margin: 10px;
float:right;
width: 45%;
}
<div class="wrapper">
<div class="left">element 1</div>
<div class="right">element 2</div>
</div>
<div class="wrapper">
<div class="left">element3</div>
<div class="right">element4</div>
</div>
This works for me.
.right {
float:right;
}
.left {
float:left;
}
<div>
<div class="right">1 element</div>
<div style="clear:both"></div>
<div class="right">1 element</div>
<div class="left">1 element</div>
<div style="clear:both"></div>
<div class="left">1 element</div>
</div>
Here is the fiddle. http://jsfiddle.net/nQvEW/143/
Previously, I was using <table> to split up my page layout into 3 parts, the left sidebar, right sidebar & the main centre panel. Now, after having learnt the disadvantages of overusing/misusing <table>, I want to avoid using tables for this purpose & I am looking to style these 3 divs in such a way that they look like 3 columns of a <table> row.
Any inputs on how I can achieve the 3 divs in same row, would be highly appreciated.
Currently my all the three div s are shown in linearized fashion, one after another.
Maybe something easier, what about:
HTML:
<div id="main">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
CSS:
#main{
margin: 0 auto 0 auto;
width: 960px; /*just an example*/
}
#main div{
float: left;
width: 320px; /* a third of the main width*/
}
I hope this will help you.
Typically sidebars have fixed width and the middel content area takes up the rest of the space. Considering that, here's the best approach:
<style>
#left {
width:200px;
float:left;
} #right {
width:200px;
float:right;
} #main {
margin:0px 200px;
}
</style>
<div id="container">
<div id="left">content</div>
<div id="right">content</div>
<div id="main">content</div>
</div>
Resize the window and all is well.
Working JSFIDDLE: http://jsfiddle.net/7ayqe/
Give them "float:left" properties and corresponding width to make it the size you want.
Example (I know these are inline styles, used for demonstration purposes only):
<div id="left-sidebar" style="width:30%;float:left"><!--Left Sidebar--></div>
<div id="content" style="width:50%;float:left"><!--Content--></div>
<div id="right-sidebar" style="width:20%;float:left"><!--Right Sidebar--></div>
Something like this should get you started:
<div>
<div class="column">column one</div>
<div class="column">column two</div>
<div class="column">column three</div>
<div class="last"></div>
</div>
.column { float: left; padding: 5px }
.last { clear: left}
Here is a live example
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="clear"></div>
CSS:
.col1 {
float:left;
width:250px;
}
.col2 {
float:left;
width:600px;
}
.col3 {
float:left;
width:20px;
}
.clear {
clear:both;
}