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.
Related
I have a css issue.
I have two "columns" where each column contains dynamic content + images at the bottom of each column.
I want these blocks of images to be in the bottom of each column. I could use position:absolute and set a height of each column but I'm looking for a way to achieve this without using a specified height on the columns.
The html is something like
<div class="wrapper">
<div class="content">
{text content / dynamic }
<div class="grid"> <!-- image blocks -->
</div>
</div>
<div class="content">
{text content / dynamic }
<div class="grid"> <!-- image blocks -->
</div>
</div>
</div>
If i understand you truely, you want to align-bottom of container's both right and left side. You can do use display:flex, give a
<div class="wrapper" style="display:flex; width:100%; height:auto; justify-
content:flex-start; align-items:center; "></>
Write your other styling codes, align-items helps you to your content containers align center vertically.
I have got this HTML:
<div class="A">
<div class="B1">
<div class="C1"></div>
</div>
<div class="B2"></div>
</div>
.A is a container with padding, B1 contains a long list and scrolls. .B2 should be aligned in the list (vertically and horizontally centered like a loading image).
How do I achieve that? The horizontal alignment is not working for me:
https://jsfiddle.net/1phyb6y8/
The reason why it is not working: the absolute positioned element does not ignore the padding of its parent. I've added a div .inner with position: relative and put both, .B2 (loading animation) and .B1 (container with scrollbar) in it. This way .B2's position is calculated based on the width of .inner which has no padding.
<div class="A">
<div class="inner"> /* .inner { position: relative; } */
<div class="B2">
</div>
<div class="B1">
<div class="C1">
</div>
</div>
</div>
</div>
See the updated JSFiddle.
I added a container to your structure so the .B1 and .B2 divs are in it.
B1-container takes a relative position. B2, as you did takes an absolute position and proper positionning to be at the center (I added transform: translate(-50%, -50%) so the div in the center stays in the center whatever happens to the block width).
So B2 will always be centered above B1 and move independently from it.
Hope it will help !
<div class="A">
<div class="B1-container">
<div class="B2"></div>
<div class="B1">
<div class="C1"></div>
</div>
</div>
</div>
See on JSFiddle
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
Here's a js fiddle of what I currently have, I am trying to make it so the boxes all fit within one line and there's a scrollbar that let's people scroll horizontally rather than having the boxes do what they're doing now.
Also, if anyone could get the class panel-body to fill 100% to the height of the page, that'd be awesome ;D
This is using Bootstrap 3.0.2, so the panels are pulled from that.
http://jsfiddle.net/Y55af/
Sample css:
.mainContent{
padding:20px;
}
.workplace_outter{
width:100%;
overflow-x:scroll;
}
.workplace_inner{
width:2000px;
}
.workplace_outter .panel{
width:300px;
margin-right:5px;
display:inline-block;
}
Sample HTML:
<div class="mainContent">
<div class="workplace_outter">
<div class="workplace_inner">
<div class="panel panel-default">
<div class="panel-heading">
Item
</div>
<div class="panel-body">
Item Body....
</div>
</div>
</div>
</div>
</div>
I don't quite understand what you mean by "get the white portion of the boxes to fill vertically", but since the panels are already inline-block elements, you can replace the width specification on their container with white-space: nowrap which will prevent any inline or inline-block elements from wrapping onto a second line.
Here's an updated fiddle, and the relevant code changed:
.workplace_inner{
/* width:2000px; (don't need anymore) */
white-space: nowrap;
}
I have two divs on a page with the same height position. I'm trying to make them expandable, allot like what goes on in the WordPress dashboard area:
Now i've got the left div to expand but only with the right div staying at the same width. I need both to expand on zooming in and out.
any ideas how this is done?
I've been looking it up for the past hour but i cant find anything.
A link to a tutorial would be cool (good luck finding one).
EDIT:
Here guys, i found something similar: http://jsfiddle.net/Khez/2zLPF/embedded/result/
do you see how the two divs side by side expand? the green and blue ones...
If you want your divs to dynamically change depending on the width of their container, set the widths using percentages:
HTML:
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
CSS:
.column {
float: left;
width: 50%; }
.column div { margin: 0 20px; /* Set the spacing between the cells */ }
Preview: http://jsfiddle.net/Wexcode/F7h2C/
NOTE: Because you are setting the combined widths of the columns to 100%, you cannot add padding to .column if you want them to be on the same line. The inner div wrapper will allow you to add spacing between your two columns. You should apply all background attributes to .wrapper.