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>
Related
I have this jsfiddle: Sample
As you can see 2 divs are align together side by side, what I want is to vertically aligning them. Also I want to be able to add another div to float to the right which is also vertical aligned.
How can I able to aligned them without using absolute positioning?
<div style="background-color: blue; ">
<!-- Global Header -->
<div class="header">
<div class="floatLeft">
WritePub
</div>
<div id="pcontainer" class="inner-header-search floatLeft">
<input type="text"/>
</div>
</div>
</div>
Your fiddle is too noisy. If you want to vertical align the contents of a div without touching its height you can add "display: table-cell" to the div to simulate a table row column which gives you alignment.
http://jsfiddle.net/5peh12th/2/
<div class="container">
Hello: <input type="text-box"/>
</div>
.container {
display: table-cell;
width: 800px;
background-color: red;
height: 50px;
vertical-align: middle;
}
or you can just not give the div a height and give top and bottom padding of equal numbers
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 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?
If I try to apply min-width, max-width to a floating div so that it expands to max-width when the right content is hidden does not work.
But, if I use table and 2 tds in it, the left td will expand to 100% if the right td is hidden.
Can I achieve this table effect with floated divs?
I don't think you can do what you are asking, but you can make it look like what you are asking.
Make it into two tds and put a max-width on a div inside the td. Would that work?
This isn't going to work with floats. Luckily we now have more tools at our disposal.
Here are two very simple methods to expand a div to 100% of the available width if a sibling horizontally to it is hidden or removed.
#1 – Using display: flex
Compatibility: Edge and all modern browsers. IE 10 and 11 support the non-standard -ms-flexbox.
The Basic Markup
<div class="container">
<div>
First Column
</div>
<div>
This second column can be hidden or not exist and the first column will take up its space
</div>
</div>
The CSS
The container div is given display: flex.
The containers children are give flex: 1 and they will be assigned equal width, can grow and can shrink.
.container {
width: 500px;
display: flex;
}
.container>div {
flex: 1;
background: #FF6961;
height: 200px;
margin-bottom: 20px;
}
.container>div:nth-child(even) {
background: #006961;
}
<div class="container">
<div>
Content
</div>
<div>
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when other divs are hidden.
</div>
<div style="display: none">
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when there is no other div.
</div>
</div>
Read this guide to flexbox
Read more about flexbox on the MDN
#2 – Using display: table
Compatibility: IE8+ and all modern browsers
The Basic Markup
<div class="container">
<div>
First Column
</div>
<div>
This second column can be hidden or not exist and the first column will take up its space
</div>
</div>
The CSS
The container is given display: table
The containers children are given display: table-cell and will act the same as cells in an HTML table. If a cell is hidden or is removed the other cell will take its space.
.container{
display: table;
width: 600px;
margin: 20px;
}
.container>div {
display: table-cell;
height: 200px;
background: #FF6961;
}
.container>div:nth-child(even) {
background: #006961;
}
<div class="container">
<div>
Content
</div>
<div>
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when other divs are hidden.
</div>
<div style="display: none">
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when there is no other div.
</div>
</div>
<div class="container">
<div>
Content takes up the remaining width if a cell has a fixed width.
</div>
<div style="width: 200px">
Content
</div>
</div>
Read more about CSS tables on the MDN