Here is my html code looks alike.
<div style="width:70%; margin:0px auto; border:1px solid #000;">
<div style="float:left; width:100px; border:1px solid #000;">Test</div>
<div style="float:left; border:1px solid #000;">Test</div>
</div>
The output result looks like this.
http://imm.io/7PWG
As you can see, the wrapper div is at the center of the browser but two of the inner div are on the left side. I want them to be in the center of the wrapper div.
Any ways to do it ? Please help me out. Thanks.
display: inline-block can do this in a reasonably simple way:
<div style="width:70%; margin:0px auto; border:1px solid #000; overflow:hidden; text-align:center">
<div style="display:inline-block; vertical-align:top; text-align:left">
<div style="float:left; width:100px; border:1px solid #000;">Test</div>
<div style="float:left; border:1px solid #000;">Test</div>
</div>
</div>
See: http://jsfiddle.net/LJaDd/
I wrapped a new div around your inner two divs, and gave it display: inline-block.
I added text-align: center to the outer div to center the wrapper div, then added text-align: left to the wrapper div to align the text inside back to the left.
I added overflow: hidden to the outer div so that it contains the floated divs.
I think this will be helpful: http://www.pmob.co.uk/pob/centred-float.htm
try this ...
<div style="width:70%; margin:0px auto; border:1px solid #000; background-color: yellow;">
<div>
<div style="float:left;width:100px; border:1px solid #000;">Test</div>
<div style="float:left;border:1px solid #000;">Test</div>
</div>
</div>
the float:left was causing your inner 2 divs to go all the way to the left and not be centered. By putting those inside another div that fixes it.
here it is in action ... http://jsfiddle.net/sixgun/mp3T2/
Related
I have a outer div which has two inner divs. The second inner div may or may not contain text value. Currently the two inner divs are displayed at the top. However I want to be displayed always at the bottom. The divs are shown below:
<div class="outerDiv">
<div class="firstInnerDiv"></div>
<div class="secondInnerDiv"></div>
<div>
I tried to add position:absolute;bottom:0 to both the inner divs. Then both disappear. I tried vert-align:bottom at the outer div, which has no effect.
Thanks
Give position:relative; to your outer div and inner divs and position:absolute; to your inner wrapper (.inner), That would do it!
.outerDiv{
position:relative;
width:100px;
height:200px;
border:1px solid black;
}
.inner{
position:absolute;
bottom:0;
}
.firstInnerDiv, .secondInnerDiv{
width:100px;
height:auto;
}
.firstInnerDiv{
position:relative;
border:1px solid red;
}
.secondInnerDiv{
position:relative;
border:1px solid green;
}
<div class="outerDiv">Main
<div class="inner">
<div class="firstInnerDiv">Div 1</div>
<div class="secondInnerDiv">Div 2</div>
</div>
</div>
Position Of Parant Div Is Should Give "Relative" And Give Position Absolute To InnerDivs.
.outerDiv{
position:relative;
width:200px;
height:200px;
border:1px solid #ff8800;
}
.firstInnerDiv{
position: absolute;
width:100%;
height:105px;
border:1px solid red;
bottom:-110px;
}
.secondInnerDiv{
position: absolute;
width:100%;
height:105px;
border:1px solid red;
bottom:-215px;
}
This Is Example Of Your Requirement Try Once .
<div class="outerDiv">This IS Main Div
<div class="firstInnerDiv">Inner One</div>
<div class="secondInnerDiv">Inner Two</div>
<div>
Absolutely positioned elements will be positioned in relation to the closest parent that is positioned. If none are positioned, they will be positioned in relation to the . If you give .outerDiv a CSS of position: relative; and then position the inner elements absolutely, then you should get the results you're looking for. You can read more on positioning here.
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 have an image that is 500px wide. It is inside of a div. The width of the div is 250px. How can I align the image centered inside of the div? Should I use top or left or should I have negative margins?
I would use negative margins: #myDiv img { margin: 0 -125px; }. This only works if you know the width of both the DIV and the IMG though.
Can you change (or at least add) something in the html around the image? This is kind of an old trick, and is a little awkward in that it requires you to add an extra <div> around the image, but it works quite nicely if you're ok with that (Note, added some borders to make the effect easily visible while testing):
<div style="width:250px; border: solid 2px red;">
<!-- Place the following div at 50%: -->
<div style="width: 500px; margin-left:50%; border: solid 2px blue;">
<!-- ...then move the image back by half of it's own width: -->
<img style="width:500px; margin-left:-250px; border: solid 3px green;" />
</div>
</div>
Demo
Hey now used to display table-cell properties as like this
<div class="parent">
<img src="http://www.gravatar.com/avatar/3c6597370b476903ed475f70b4b3ce31?s=32&d=identicon&r=PG">
</div>
Css
.parent{
border:solid 1px red;
display:table-cell;
width:300px;
height:300px;
vertical-align:middle;
text-align:center;
}
.parent img{
vertical-align:top;
}
Demo
try this one (not sure about ie-6 but work fine in ie-7 and plus)
<style>
.test{ height:250px; width:250px; overflow:hidden; position:relative;}
.test img{ position:absolute; top:50%; left:50%; margin-left:-250px; margin-top:-250px; height:500px; width:500px;}
</style>
<body>
<div class="test"><img src="img.png" alt="img" /></div>
</body>
if is it possible to use that image as background you can try this one
.test{height:250px; width:250px; background:url(img-path.png) no-repeat 50% 50%;}
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/