I want the top lines of two DIVs (<div></div>) to be aligned horizontally, how to do it?
Steven,
In addition to T. Stone's suggestion to float both divs, a simple way to align two divs is to make both have the display: inline-block; CSS rule and give the lower div the vertical-align: top; CSS rule.
Take a look at this simple jsFiddle example to see how this works.
div {
display: inline-block;
}
div#tall {
height: 4em;
}
div#short {
height: 2em;
vertical-align: top;
}
In response to "is there another way to do it", sure you could use display: inline but you have a bunch of hacks to remember to get it to work in IE6/7. This way is generally better (but it all comes down to the individual circumstances)
<style type="text/css">
.keeper {
overflow: hidden; /* expand to contain floated children */
}
.keeper div {
width: 200px;
height: 30px;
float: left;
border-top: 1px solid red; /* so you can see the 'tops' */
}
</style>
<div class="keeper">
<div>
</div>
<div>
</div>
</div>
Float them in a container.
.parent div { float: left; width: 50%; }
<div class="parent">
<div>1</div>
<div>2</div>
</div>
Note: The sum of the width of the child divs can not be greater than 100% of the parent div, including margin and padding.
Alternative
If maintaining flow with the page isn't a requirement, and all that really matters is aligning, them, the divs can always be positioned absolutely.
.abs { position: absolute; top: 100px; width: 50px; }
.left { left: 0px; }
.right { left: 50px; }
<div class="abs left">1</div>
<div class="abs right">2</div>
Related
I'm having trouble because I have a div I want to center and what I have
usually been told to do is this:
width: 700px;
margin-left: auto;
margin-right: auto;
the trouble is, this is for if you want the div to be a fixed width. I want the div
to adjust its size based on the text in the div, and still be centered. I tried:
width: auto;
margin-left: auto;
margin-right: auto;
but this didn't work. It stretches the div to fill up the screen when I do this.
Anyone know what to do here?
for parent block or body - text-align:center;
for centerd block- display:inline-block;
.center {
display: inline-block;
background: red;
}
body {
text-align: center;
}
<div class="center">
<p contenteditable="true"> write text </p>
</div>
DEMO http://jsfiddle.net/RXP4F/
Content Editable MDN
have you tried the approach shown here?
http://www.tightcss.com/centering/center_variable_width.htm
basically.
put your content inside a floated div
put that floated div within another floated div
put left: 50%, position relative on outer div
put left: -50%, position relative on inner div
finally, nest everything in one more div with overflow:hidden
.outermost-div{
background-color: blue;
overflow:hidden;
}
.inner-div{
float:left;
left:50%;
background-color: yellow;
position: relative;
}
.centerthisdiv {
position:relative;
left: -50%;
background-color: green;
float:right;
width:auto;
}
here is my jsfiddle demonstration:
http://jsfiddle.net/wbhyX/1/
Use margin:
0px auto; and display: table;
There are example:
https://jsfiddle.net/da8p4zdr/
You might want to try CSS display:table-cell or display:table
Try this structure.
<div class="container">
<div class="center_div">
</div>
</div>
.container{
float: left;
left: 50%;
position: relative;
}
.center_div{
position: relative;
left: -50%;
float: left;
}
zloctb's answer on Aug 30 '13 at 4:14 actually worked in principle but was incomplete. If you want your element width to be 'auto' based on the contents within it AND centered within its parent BUT with the contents inside the CHILD element left-aligned, do the following (because it really is the simplest way):
.parent {
width: 100%;
text-align: center;
}
.parent div.child {
display: inline-block;
text-align: left;
width: auto;
}
(Obviously, if you just wanted everything strictly centered, you would not need the code for the child element.)
EDITED:
use table, it could be easier to style. Then add div into the tr
.outer-container {
position: relative;
left: 50%;
float: left;
clear: both;
margin: 10px 0;
text-align: left;
}
.inner-container {
background: red;
position: relative;
left: -50%;
text-align: left;
}
Centering an element horizontally can get a little weird, as the functionality isn't very intuitive. Really, you need to play games with text-align:center; and margin:auto, and you'll need to know when to use which.
For example, if I want to center the contents of an element (raw-text), including buttons and inputs, I can use text-align:center.
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
</div>
If we add other elements to our container, those elements will have their width forced to 100%. This helps us emulate that it is centered because technically, at 100%, it is centered! Silly, isn't it?
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
<p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p>
</div>
If your width property IS defined though, then you can use the margin: auto style to center it within the parent.
<div style="margin:auto;border:1px solid black;width:300px;" >
I am centered!
</div>
You need to determine which solution is best for you. I wish I could help more, but it is hard to know what solution will best fit your needs when you haven't provided the HTML for you problem!
Either way, I hope this JSFiddle helps clear things up!
I have a very simple structure:
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">
Not much content, but needs to be stretched to the end.
</div>
</div>
The parent div has a set height, and I want div.stretch to stretch all the way to that height, regardless of how little content it has. Using height: 100% does the trick, until you add some other element which pushes the content down.
I guess that specifying height: 100% means that the element should have the exact same absolute/computed height as the parent element, and not the remainder of the height after all the other elements have been computed.
Setting overflow: hidden obviously hides the overflowing content, but that's not an option for me.
Is there any way I can achieve that in pure CSS?
Demo of my problem
In the time since this question was asked and answered, a better way to achieve this has come into existence: flex-box.
Just set the parent's display to "flex" and flex-direction to "column", and set the "stretchy" child's height to "inherit". The child will inherit a height of however many pixels are left over to fill up its parent.
In the following example, lines marked /* important */ are part of the actual solution; the rest of the CSS is just to make it visually easier to understand.
.parent {
display: flex; /* important */
flex-direction: column; /* important */
height: 150px;
border: 6px solid green;
}
h1 {
background: blue;
margin: 0px;
height: 90px
}
.stretch {
background: red;
height: inherit; /* important */
}
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">
Not much content, but needs to be stretched to the end.
</div>
</div>
You could float the h1 element. It would work no matter what height it is, and the content of the stretch element will be pushed below it. But I'm not entirely sure if this is what you are looking for.
EDIT: I'm not certain what kind of browser support you're looking for, but you could also set the display to table on .parent and then have .stretch inherit the height. Then you can nest the column divs inside of .stretch and float them.
Updated: http://jsbin.com/oluyin/2/edit
HTML
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">
<div class="col">Not much content, but needs to be stretched to the end.</div>
<div class="col">Not much content, but needs to be stretched to the end.</div>
</div>
</div>
CSS
.parent {
display: table;
}
.stretch {
height: inherit;
}
.col {
float: left;
width: 50%;
}
If you know the height of your H1 you can do this to fill out the child:
.parent {
background-color: #eee;
border: 1px solid black;
width: 300px;
height: 600px;
position:relative;
}
h1 { Height: 100px; }
.stretch
{
background-color:#dddddd;
position: absolute;
left: 0;
width: 100%;
top: 100px;
bottom: 0;
}
Example: http://jsbin.com/apocuh/1/edit
If you don't know the height of H1, I'm afraid you will probably need to use JavaScript or thgaskell's method.
Take a look at this post for more information, and an example with JS: CSS: height- fill out rest of div?
Maybe using display:table properties fits your needs ?
Edit: This answer actually looks like thgaskell's one, but instead of using floats I use table-row and table-cell display, and it seems to achieve what you are looking for.
Here is the jsfiddle : http://jsbin.com/ebojok/17/edit
.parent {
background-color: #eee;
border: 1px solid black;
width: 600px;
height: 600px;
display:table;
}
h1{
display:table-row;
width:100%;
}
.stretch{
vertical-align:top;
display:table-cell;
height:100%;
background-color: #ddd;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">Not much content, but needs to be stretched to the end.</div>
</div>
</body>
</html>
CSS
.parent {
background-color: #eee;
border: 1px solid black;
width: 300px;
height: 600px;
position:relative;
}
.stretch {
background-color: #ddd;
height: 100%;
position: absolute;
top: 0;
}
http://jsbin.com/amesox/1/edit
This will cover your h1 element as the .stretched goes over it. You could get around this by using z-index: 1; on your h1 element, but I'd advise against it if you want text in your .stretched element.
You need position:relative; on your parent div to give position: absolute something to 'hook on' to. absolute positioned elements, ignore other elements and are placed on top of them unless their z-index is higher or they are its children.
I am trying to float some elements and apply clearfix so that the parent element can expand to the height and width of the children.
So, I simply set up the layout as per this fiddle: http://jsfiddle.net/fMjEx/
I then wanted to float the elements inside .bar. This is usually quite straight forward:
Float the elements.
Clear fix the parent using pie-clearfix or overflow: auto.
However, I ran into these problems:
If I use pie-clearfix, the element .picture which is next to .bar is also included in the clearing: http://jsfiddle.net/6C7WD/
If I use overflow: auto or overflow: hidden, the width of the .bar no longer spans the width of the document: http://jsfiddle.net/fv2gA/
Initially, one solution I had was to make .picture position: absolute. However, the problem with this approach is that the element is taken out of the flow.
In the layout, the height of .bar is variable depending on the content inside. I would like to give .bar and .picture a margin-bottom so that anything that comes after them is pushed downwards by that amount depending on whether .bar or .picture has a greater height.
This rules out using position: absolute on .picture as a solution.
Are there any solutions that satisfy the following?
Clear only floats within .bar.
Does not remove any elements from the flow.
This is the solution I ended up with:
Added a wrapper to the markup:
<div class="container">
<div class="group"> <-------------------------- This is the wrapper
<div class="picture"></div>
<div class="bar">
<div class="info"> some text goes here</div>
<div class="buttons">some other content goes here</div>
</div>
</div>
</div>
And the CSS:
.picture{
width: 100px;
height: 100px;
float: left;
background: green;
margin-left: 100px;
margin-top: 10px;
z-index: 2;
position: relative;
}
.bar{
background: blue;
margin-top: -80px;
overflow: auto;
width: 100%;
float: left;
z-index: 1;
position: relative;
}
.group{
margin-bottom: 10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
.info, .button{
float: left;
margin-left: 200px;
}
.container{
overflow: auto;
}
Fiddle of the above: http://jsfiddle.net/c6Lng/
This may sound weird but i have some css which aligns mys divs. In one place i also use http://www.brunildo.org/test/img_center.html which centers images.
Now i want my divs inside a larger div to go to another line if this one gets full. float: left seems to be the answer. The problem is it ruins my formatting. Including solution in the above link. I have this test code. If i remove the width and float it looks fine except it may take up too much space and not go to another line.
I was thinking i could use float on an outerdiv and center the image within. However float: left is still breaking it. I am hoping there is a way to remove the float so each div does go left but the div inside centers correctly not breaking my formatting.
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background: blue;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
div.c
{
background: red;
overflow: hidden;
min-width: 400px;
max-width: 400px;
}
div.c div
{
float: left;
}
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
<div class="c">
<div>
<div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
</div></div></div>
regular old display:inline can be used on the images themselves (or a container div). this will let the items flow onto multiple lines depending on the width of the enclosing div.
to center the top-level div, something like margin: 0 auto should do it (if the parent has a width) or the good old <center> tag if not.
I'm sure this a common problem, but couldn't find the exact answer :)
I have two divs inside another div. I want the two divs to be on the same level, one floating to the left and the other to the right. But they won't get inside the parent div unless I use position: absolute on the parent. But then the child-divs won't stay on the same level :S
#main {
margin-left: 30px;
margin-top: 20px;
position: absolute;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 20px;
float: right;
border: 1px solid white;
}
<div id ="main">
<div id ="left_menu>&blablabal</div>
<div id ="content">blablb</div>
</div>
your margin-left of #content should include the width of #left_menu. Thus should be
#content {
margin-left: 170px;
/* float: right; */ /* no need for a float here */
border: 1px solid white;
}
You also don't need a position:absolute for your #main (unless other purposes)
So finally:
<style type="text/css"><!--
#main {
margin-left: 30px;
margin-top: 20px;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 170px;
border: 1px solid white;
}
.c{clear:both;}
--></style>
<div id="main">
<div id="left_menu>&blablabal</div>
<div id="content">blablb</div>
</div>
<div class="c"></div>
.c is to clear and pushes the bottom content off the floats.
What about this its all to do with your width on your container.
This works for me.
<style type="text/css"><!--
.Content{
Width:100%;
}
.FloatLeft{
float:left;
}
.FloatRight{
float:Right;
}
-->
</style>
<div class="Content">
<div class="FloatLeft"></div>
<div class="FloatRight"></div>
</div>
you will need to 'float' the main div, or use a clearing <div> or <br> after your content and left menu <div>s.
The problem is not "staying on the same level", but it's about the size of the container div.
This might help you: http://archivist.incutio.com/viewlist/css-discuss/63079
The nicest and easiest thing to do is to set overflow: hidden on the container, #main. I don't think this works in IE6 though.
try giving the main div an overflow: hidden; and taking away it's position: absolute;
which will give it a height equivalent to the greater height of the floating divs
Also, I don't know if you copied it from your page, but you're missing a close quotation in your left_menu id=""
#main{
display:inline-block;
width:100%;
}
and remove absolute to the parent;
#left_menu,#content{
....
vertical-align:top;
}