I have multiple div's I want to display in a horizontal row. Normally, the way I'd do this is to simply float them to the right and put them in the markup in reverse order like so:
<div>
<div style="float:right">Right</div>
<div style="float:right">Middle</div>
<div style="float:right">Left</div>
</div>
I'm trying to accomplish a similar thing, float div's to the right, but I can't reverse their order in the markup for SEO reasons. The left div needs to be first in the code.
Is there a simple way to do this without resorting to positioning things absolutely?
You could apply a text-align: right to the container and a display: inline-block in place of the floating:
<div style="text-align: right">
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Middle</div>
<div style="display:inline-block">Right</div>
</div>
DEMO
Using display:inline-block might not work as expected with elements of variable height.
So you might want to use:
<div style="float: right">
<div style="float:left">Left</div>
<div style="float:left">Middle</div>
<div style="float:left">Right</div>
</div>
See: demo of both -- inline and float-float.
You could give float: right to the outer div. And the display style of the inner div is inline-block
<div style="float: right" >
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Middle</div>
<div style="display:inline-block">Right</div>
</div>
Float your elements to the left.
<div>
<div style="float: left; position: relative; width: 200px;">Left</div> <!-- dummy width -->
<div style="float: left; position: relative; width: 200px;">Middle</div> <!-- dummy width -->
<div style="float: left; position: relative; width: 200px;">Right</div> <!-- dummy width -->
</div>
Also, you'll need to specify the width for each of these divs.
What is your reasoning behind floating them to the right?
Related
I have a similar html to the one bellow (i use external stylesheets but in this example I don't to make it easier to read).
The "bigger" div dynamically gets multiple lines of text, while the "smaller" always has just one line. However, I want the text in the "smaller" div to vertically align exactly in the middle on the left side of the "bigger" div. I can't use display:table and display:table-cell because I use jquery slidedown function to show the "wrapper" div and that forces the "wrapper" to be display:block.
Any help on how to do this would be appreciated.
<div class="wrapper">
<div class="smaller"style="float: left; min-height: 100%;">
<p style="vertical-align: middle;">Heading</p>
</div>
<div class="bigger" style="float: right;">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
Please avoid inline styles. You have classes, use them! Also there is no vertical-align:center. Take a look here:
html
<div class="wrapper">
<div class="smaller">
<p>Heading</p>
</div>
<div class="bigger">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
</div>
css
.wrapper{
display: table;
}
.smaller{
min-height: 100%;
display: table-cell;
vertical-align: middle;
width: 97%;
}
.bigger{
height: 100px;
display: table-cell;
}
You can use display:table and display:table-cell to achieve this.
fiddle
You don't want .bigger to float, because .wrapper relies on it for the height. Try something like this fiddle.
I've a 3 column layout. My issue is that content in the second <div> populates from the bottom, as you can see in this fiddle. I would like to align it's content to the top.
Following is the corresponding html
<div class="user-info" style="width: 100%;">
<div id="image-container">
<img src="image.jpeg" height="200px" width="200px">
</div>
<div id="info">
<div class="info-item">
<div class="info-attribute">tullsy</div>
</div>
<div class="info-item">
<div class="info-attribute">tullsy</div>
</div>
<div class="info-item">
<div class="info-attribute">tullsy</div>
</div>
</div>
<div id="button-container">
<input type="button" id="edit_button" value="edit" class="button" onclick="function()">
<br>
</div>
</div>
and css
#image-container {
display: inline-block;
width: 100;
}
#info {
display: inline-block;
}
#button-container {
display: inline-block;
float: right;
padding: 10px;
}
I can fix this issue by applying display: flex; for the container, however it seems I can't float elements inside a flex container.
I've managed to achieve what i want using <br>, as you can see in this fiddle. But i want to achieve the same without using <br>s or fixed padding.
If i understood correctly,
First of all you need to apply a height to the container #info, (So you can avoid using <br>s to add height) Otherwise it'll shrink wrap to the height of it's child items.
Then you can apply vertical-align:top; for aligning the inline-block child items in it to the top without using <br>s
Demo
I have div's inside a div
<div id="out" align="center">
<div id="in1" align="left">111</div>
<div id="in2" align="left">aaaaaaaaaaaaaaaaaaaaaa</div>
<div id="in3" align="left">bbbb</div>
<div id="in4" align="left">6516519191</div>
<div id="in5" align="left">apple</div>
<div id="in6" align="left">ii</div>
</div>
The expected result is a div with size=(max inside div size) which is centered. Then items inside it are all aligned left:
111
aaaaaaaaaaaaaaaaaaaaaa
bbbb
6516519191
apple
ii
I don't want to give width to the outer div since I have no idea about size of the items from before.
is there any way?
You can by inserting another (outer) container div.
Outer div container: width 100% and centered text alignment;
Inner div container: inline-block and left text alignment
CSS
#outerContainer {
width: 100%;
text-align: center;
}
#innerContainer {
display: inline-block;
text-align: left;
}
HTML
<div id="outerContainer">
<div id="innerContainer">
<div id="in1">111</div>
<div id="in2">aaaaaaaaaaaaaaaaaaaaaa</div>
</div>
</div>
Running Demo: http://jsfiddle.net/nvMmx/
First, there is no "align" attribute for div's.
The information you are providing looks like tabular data. In that case, a table should be used, not div's.
Set the outer width:100%;
Or define the inner width otherwise
CSS
.abc{
float:left;
width:100%;
}
HTML
<div id="out" align="center">
<div id="in1" class="abc">111</div>
<div id="in2" class="abc">aaaaaaaaaaaaaaaaaaaaaa</div>
<div id="in3" class="abc">bbbb</div>
<div id="in4" class="abc">6516519191</div>
<div id="in5" class="abc">apple</div>
<div id="in6" class="abc">ii</div>
</div>
When I use the following code, the last div overlaps the floated content:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;">test</div>
The common fix is to do this:
<div style="overflow:hidden;">
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
</div>
<div style="background:red;">test</div>
However, in my case, I cannot add in an extra element. Is there another workaround for this?
Edit:
clear:both; fixed the overlapping issue, but there's a margin on the last div, so it's something like this:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:both;margin-top:50px;">test</div>
And now the new problem is that the margin isn't showing up.
You could simply clear the floats...
<div style="background:red;clear: both;">test</div>
Try the following:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:left;">test</div>
EDIT. To get the margin-top, add margin bottom to the floated elements
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="background:red;clear:both;">test</div>
Set the clear property on your last <div> to left or both:
<div style="background: red; clear: left;">test</div>
Edit: As for the margin, you can do some relative positioning:
<div style="background: red; clear: left; margin-bottom: 50px; position: relative; top: 50px;">test</div>
There's no need to use floats here. Make the first two elements inline-block elements, and the third element a block-level element.
HTML:
<div class="inline-block">
Test
</div><div class="inline-block">
Test
</div>
<div class="block">Test</div>
Note that </div><div class="inline-block"> are touching. Because these two element are inline-block elements, any space in the markup will produce space in the presentation.
CSS:
.inline-block {
width: 50%;
display: inline-block; }
.block { margin: 50px 0 0; }
Preview: http://jsfiddle.net/Wexcode/eGPWt/
On a web page, I have two divs. I would like to place the second div just right to the other one so that they're in a line.
You can use the float CSS style. Set it to left for the first div. The second div will be placed just right of it (so long as there is enough space)
<div>
<div style="float: left">
<p> This div will be on the left</p>
</div>
<div >
<p> This div will be on the right</p>
</div>
<!-- optionally, you may need to add a "clearance" element below the floating divs -->
<div style="clear: both" ></div>
</div>
Note, that sometimes it may be necessary to give the floating divs a fixed width in order to achieve the proper horizontal layout.
<div>
<div style="width: 100px; float: left">
<p> 100px div will be on the left</p>
</div>
<div style="width: 200px">
<p> 200px div will be on the right as long as there is enough
horizontal space in the container div
</p>
</div>
<!-- optionally, you may need to add a "clearance" element below the floating divs -->
<div style="clear: both" ></div>
</div>
<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both;"><!-- usually leave this empty --></div>
</div>
You can also float:right; in order to make the divs align on the right side of the page. The clear is VERY IMPORTANT. In IE a lot of the time the float left/right rule is propagated to other elements to elements you did NOT intend to float. Usually though; you don't pick up on this right away and it becomes a nightmare to figure out why your page looks like crap down the road. So just make a habit of putting an empty clear div as the last sibling of any divs you decide to float.
Most simple way is CSS float:
<div id="div1">hello</div>
<div id="div2">world</div>
And the CSS:
#div1 {float: left;}
#div2 {float: left; margin-left: 10px;}
Simple test case.
After the floating divs add another one to clear the float so that further contents will be displayed fine:
<div style="clear: both;"></div>
float is a quick way, inline-block is another quick way and has some advantages over float such as not needing a clear:both element.
here's an example with both methods http://jsfiddle.net/dGKHp/
HTML:
<div id="floatExample">
<div>Float Left</div>
<div>Float Right</div>
<br />
</div>
<div id="inlineBlockExample">
<div>Left</div><div>Right</div>
</div>
CSS:
#container {width:600px;margin:0 auto;}
#floatExample div {float:left;background-color:#f00;width:50%;}
#floatExample br {clear:both;}
#inlineBlockExample div {display:inline-block;width:50%;background-color:#ff0;}
This is a pretty good write-up on ins and outs of inline-block: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/