If I am having two divs in a parent div and and all three divs have float left. What I have to do is to align center the two child divs without removing float left.
Use display: inline-block instead of float: left on child divs and you can give text-align: center to the parent div.
Let me see if i have understood,so you have something like this:
<div id="parent" style="float:left;">
<div id="child1" style="float:left;"></div>
<div id="child2" style="float:left;"></div>
</div>
And if im right you want the two div childs to be aligned in the center of the parent div but without removing the left float of none of them.Then i think this might work:
<div id="parent" style="float:left;position:absolute;">
<div id="child1" style="float:left; position:relative; left: 100px"></div>
<div id="child2" style="float:left; position:relative; left: 100px"></div>
</div>
So in the div style,try to center it by assigning a value in percentage or pixels to left:
It should work.I also advice you to use percentage,but first use pixels to understand how it works.And another advice is to not use css in html tags,i just showed you what to do,but it's recommended to have another file (style.css) to include in your html file.
This layout may help you:
HTML
<div class="div-p">
<div class="div-1"></div>
<div class="div-2"></div>
</div>
CSS - DEMO
.div-p{background-color:#eee;width:640px;height:400px;float:left;}
.div-1{background-color:#f00;width:300px;height:300px;float:left;margin:10px;}
.div-2{background-color:#0f0;width:300px;height:300px;float:left;margin:10px;}
If you want to center the parent div then use margin:0 auto; and remove the float:left;
CSS - DEMO
.div-p{background-color:#eee;width:640px;height:400px;margin:0 auto;}
.div-1{background-color:#f00;width:300px;height:300px;float:left;margin:10px;}
.div-2{background-color:#0f0;width:300px;height:300px;float:left;margin:10px;}
#parent{width:100%;}
#child1,#child2{width:90%;margin:0px 5%;}
set your child width in percentage with margin.
it will align both child div in center
you need set these styles for 2 child divs :
{ width:50%; text-align:center; float:left; height:50px;}
and the parent div :
{ width:100%; margin: 0 auto; float:left; height:50px;}
Note: height style is optional.
Related
How can I put two div-tags next to each other? I tried this:
<div>text 1</div><div>text 2</div>
But they appear underneath each other, just as I would have written them in two lines.
Div's are block level elements, meaning they'll occupy all available space unless told otherwise. In order to display them side-by-side, you'll need to use the CSS property float.
CSS
.float-left{
float: left;
}
than in HTML just assign that class name like:
<div class="float-left"> 1 </div>
<div class="float-left"> 2 </div>
use css float:
you need float: left or right with a specified width for the divs to be aligned beside each other.
<div style="float:left; width:50%; background:yellow">text 1</div><div style="float:left; width:50%; background:green">text 2</div>
Actually, you don't need floats for something this simple. Simply changing the display type to inline will take care of this for you.
See my pen here:
http://codepen.io/KempfCreative/pen/oLNqMZ
div { display: inline; }
is all you need
for a perfect resizing use flexbox
wrap those divs in one parent
with this the inner divs will stretch completely
<div id="parent">
<div>text 1</div><div>text 2</div>
</div>
css
#parent{
display:flex;
flex-wrap:wrap;
width: 100%;
}
#parent div{
flex-grow:1;
}
I have two div inside a container div: JS Fiddle Link
<div id="container">
<div class="leftContainer">
Left
</div>
<div class="rightContainer">
<h3>Right</h3>
</div>
</div>
But I am not sure why they do not align both to top or anywhere with same alignment with this CSS:
div#container{vertical-align:top;background:#e4e4e4}
div#container div{
display:inline-block;
width:200px;
height:50px;
}
div#container div.leftContainer{background:#999}
div#container div.rightContainer{background:#555}
add vertical-align:top; for the child of #container div
div#container div{
vertical-align:top;
}
You have Right inside a <h3> tag, which is adding margin to the tag (which in turn pushes the Right heading down slightly)
Either set both Left and Right to be inside header tags, or remove the one for Right, and they will display the same.
<div id="container">
<div class="leftContainer">
Left
</div>
<div class="rightContainer">
Right
</div>
</div>
And your CSS can be left as it is
div#container{vertical-align:top;background:#e4e4e4}
div#container div{
display:inline-block;
width:200px;
height:50px;
}
div#container div.leftContainer{background:#999}
div#container div.rightContainer{background:#555}
Set float left in the first div to force the align and remove the hr or add the hr to both
div#container{vertical-align:top;background:#e4e4e4}
div#container div{
display:inline-block;
width:200px;
height:50px;
}
div#container div.leftContainer{background:#999; float:left;}
div#container div.rightContainer{background:#555}
<div id="container">
<div class="leftContainer">
Left
</div>
<div class="rightContainer">
Right
</div>
</div>
Just add css:
div#container { float:left;}
div#container div{
float: left;/*remove inline block and add float left to align your div*/
width:200px;
height:50px;
}
SEE DEMO:http://jsfiddle.net/JentiDabhi/x21nv0gm/
if you're able to use external frameworks I'd suggest you using Twitter Bootstrap and use its grid system to align stuff simply by doing somenthing like:
<div class="container">
<div class="row">
<div class="specify column sizes">
Left
</div>
<div class="specify column sizes">
<h3>Right</h3>
</div>
</div>
</div>
Using Bootstrap and specifying your choosen column sizes (col-sm-N, col-md-N, col-xs-N, col-lg-N) instead of using a fixed 200px width allows you to make your page change it's behaviour on different display sizes using only CSS
To retain the display inline-block property, without using floats - you could turn the h3 into an inline element by adding the below CSS:
h3 {display:inline;}
Add vertical-align:top; for the child of #container div
div#container div{
vertical-align:top;
}
And to retain the display inline-block property, without using floats - you could turn the h3 into an inline element by adding the below CSS:
h3 {display:inline;}
I was wondering if someone could explain to me why this is happening. Sorry I am new to CSS/HTML. I am working on creating and HTML layout for a basic page, currently I have three Divs. I want one container on the left (id= leftside) with 50% width and another on the right (id=rightside) with 50% width and the third container (id=narrow) below both of them at 100% width.
So currently my third div gets hidden underneath the first two unless I add the property 'top: 50%;' to that div. Can someone please explain why this is happening? I thought that since the space is already taken by my other two divs that I would not have to use the 'top' property in order for the third div to display. Why is it being hidden by the other divs?
Here is my HTML code:
<body>
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</body>
Here is my CSS code:
#leftside{
width: 50%;
height: 50%;
background-color: blue;
float:left;
}
#rightside{
width: 50%;
height: 50%;
background-color: red;
float:right;
}
#narrow{
width:100%;
height:20%;
background-color:black;
}
Whenever you do use the float for the element then don't forget to clear them.
For easier I always use overflow:hidden; to the parent div:
<div class="parent">
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</div>
.parent{overflow:hidden;}
So now, you know the key reason of hiding?
Because the first two divs have set floats so they are taken out from the "normal" flow, while the last remains the same and isn't affected by the previous two.
To be affected you can either set float also to the last element, or clear the float.
#narrow {
width:100%;
height:20%;
background-color:black;
clear: both;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/float#Clearing_floats for more info.
I always create a spacer div and use it whenever I need to clear any previous floats or coding. This is specially useful when I have a ton of divs within a parent div.
.spacer {
clear:both;
border:none;
width:100%;
}
*other divs above*
<div class="spacer"> </div>
*other divs below*
I have 2 divs, one floating left(#div1) and the other floating right(#div2). I need to add a third div(#div3) which floats centrally over these. I am currently trying to use the z-index. However I am getting some strange effects like the div1 and div2 being forces down. Also the "container" div centrally aligns all child divs.
So for some code:
<div id="container" style="width: 980px;margin-left: auto;margin-right: auto; height:130px">
<div id="div1" style="float:left">Div1</div>
<div id="div2" style="float:right">Div1</div>
<div id="div3" style="border:1px solid black;colour:black;position:relative; top:0px, left:auto; z-index:1000">I look like a button and I float the other divs, in a central location</div>
</div>
I would really appreciate some guidance on the correct code for the above, to ensure that #div3 does float over #div1 and #div2, and is centrally located.
Thanks in advance.
First of all, the style attribute on 3rd div isn't closed.
Use ; to separate between style statements in the style attribute. And its color, not colour
I would also suggest using a css
Heres a codepen:
http://codepen.io/Vall3y/pen/QwWPYd
If you want the container to float in the center, its enough to give it margin: auto
Giving the 3rd div a width and auto margin will get your desired result I would assume. I also removed some unnecessary statements like position relative
#div3 {
border:1px solid black;
color:black;
margin: auto;
width: 30%;
}
Heres a codepen:
http://codepen.io/Vall3y/pen/gbOyEb
Also consider using display: flex and ditch the floats altogether
http://codepen.io/Vall3y/pen/ogNOVV
If you want to read more on flexbox I recommend the csstricks article http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think you need to add to #div3 display property: inline-block, and set text-align: center to #container, check it out here
No relative or absolutely positioned elements needed! This should give you what you want:
CSS:
#container{width: 580px; border:2px solid orange; height:350px;}
#div1{border:2px solid blue; width:260px; height:100px; float:left;}
#div2{border:2px solid green; width:260px; float:right; height:100px;}
#div3{border:1px solid black; width:100%; float:left; height:100px;}
HTML:
<div id="container" >
<div id="div3">I look like a button and I float the other divs, in a central location</div>
<div id="div1">Div1</div>
<div id="div2">Div3</div>
</div>
Heres a live demo:
http://jsfiddle.net/Lza5fz43/
You really should separate your CSS and HTML, but this is what I did...
Add width:inherit to your div3 and position:absolute:
<div id="container" style="background-color:lightgrey;width: 480px;margin-left: auto;margin-right: auto; height:130px">
<div id="div1" style="float:left">Div1</div>
<div id="div2" style="float:right">Div1</div>
<div id="div3" style="border:1px solid black;colour:black; top:0px, left:auto; z-index:1000; position:absolute; width:inherit;">I look like a button and I float the other divs, in a central location</div>
</div>
You can modify the width to adjust where you want div3 to land and therefore can center it between them if you want.
Working JSFiddle: http://jsfiddle.net/re2hkbgh/1/
If this isn't exactly what you want just play with the width to get the effect you want as this is the positioning you are asking for! :)
<div id="wrapper" style="height:400px;width:400px;">
<div id="example">
Text
</div>
</div>
I'm looking for a way to get #example into the center (left, right, top, and bottom) of #wrapper.
I think there are multiple ways to achieve what you want. One would be:
#wrapper{
display:table-cell;
width:400px;
height:400px;
vertical-align:middle;
border:1px solid red;
}
#example{
width:200px;
margin:auto;
text-align:center;
background:blue;
}
Demo: http://jsfiddle.net/SsD4Q/3/
I hope that helped somehow!
Try giving #example margin: 0 auto;
The second property is the left/right margin. Auto should center it.
Edit: Sorry that this does not center vertically. I misunderstood. Please see http://www.jakpsatweb.cz/css/css-vertical-center-solution.html for vertical centering.
Vertical alignment is a tricky one unless your using tables.
I suggest you read this aritcle on centering elements.
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Aligning horizontally however is easy...
Assign a width and use margin:auto
#example {width:100px; margin: 0 auto;}
<div id="wrapper" style="height:400px;weight:400px;">
<div id="vertical" style="height: 50%; width: 100%; margin-top: -25px"></div>
<div id="example" style="margin: 0 auto; height: 50px">
Text
</div>
</div>
Set the margin-top minus half the height of the example div
I don't like the current proposed solutions... as they rely on either displaying as table-cells, or using static heights on #example and negative margins.
Here is my proposal, considering #wrapper has fixed height:
Set #wrapper's line-height equal to its height;
Set #wrapper's text-align to center and vertical-align to center;
Set #example's display to inline-block, so it is centered vertically and horizontally but still works as a block;
Make #example a span instead, so IE8- allows it to be inline-block.
http://jsfiddle.net/aneves_sw/yse9w/