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
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 a row with content which should be in the center of the site and a footer at the bottom. The content are divided into two 6 column. i want it to center align vertically according to the screen size. so i tried to give some percentage of top with a position relative but it doesn't work out.
If i give margin-top it is working. In order to make the top we have to give the position, so i have given it relative I don't want position absolute then the footer will come at the top of the site. Other content also will come top i thnik.
How to center align the contents and footer should stay at bottom all time all display size.
HTML
<div class='row'>
<div class='col-md-6 vertical'> content</div>
<div class='col-md-6 vertical'>content right</div>
</div>
<footer>sit at bottom</footer>
CSS
.vertical{
position:relative;
/* margin-top:20%; */ /*works*/
top:20%; /*not works even providing position */
}
JSFIDDLE NOTE: Don't forgot to resize the window then only you can able to see the two column division
<div class='row'>
<div class='col-md-6 '>
<div class="vertical"> content</div>
</div>
<div class='col-md-6 '>
<div class="vertical"> content</div>
</div>
</div>
<footer>sit at bottom</footer>
.vertical{
display: table-cell;
vertical-align:middle;
height: 200px /* Accordingly */
}
Working Fiddle Fiddle.
Apart from using display: table-cell, there is one more way to do it but is not so cross-browser at this moment. Take a look at CSS3 Flexbox.
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>
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