Is there a way to center vertically and horizontally everything automatically inside different container in the same page? I tried use top 50% and vertically-align, but it didn't work. I want to center vertically automatically because if the object/text change size, it will center exactly right place. I succeed center horizontally and I don't want to use top: px;. How do I do that using html5 and css? center everything automatically
no center
vertical-align will only align inline elements relative to each other. It will not work the way you want.
To align vertically just as you show in your image, you need to use display: flex; which has additional css properties which you may find useful.
basically you can use
position: absolute;
top: 50%;
transform: translate(-50%);
for vertical alignment.
But for this to work, the surrounding elements have to have either a fixed height, or if they have a percentage height, also their parent elements and all elements around these all the way up to the body element need to have percentage heights.
Here's an alternative solution that defines table properties for the DIVs. In a table cell the content can be centered not only horizontally, but also vertically (in class .x).
Codepen: http://codepen.io/anon/pen/WwjQZw
HTML:
<div class="wrap">
<div class="row_wrap">
<div class="head x">
ONE
</div>
</div>
<div class="row_wrap">
<div class="middle x">
TWO TWO
</div>
</div>
<div class="row_wrap">
<div class="bottom x">
THREE
</div>
</div>
</div>
CSS:
body {
font-size: 36px;
color: green;
}
.wrap {
display: table;
width: 100%;
}
.row_wrap {
display: table-row;
}
.x {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.head {
height: 200px;
background: #fa4;
}
.middle {
height: 400px;
background: #4af;
}
.bottom {
height: 100px;
background: #a4f;
}
I have a webpage which uses this tabs script on it. I want to add a two column layout to one of the tabs, and I am using the following code:
<div class="content-wrapper">
<div class="con con-left">
Column 1
</div>
<div class="con con-right">
Column 2
</div>
</div>
Which works with this CSS:
.content-wrapper
{ width: 100%;
margin: 0 auto; }
.con
{ margin: 0 10px;
float: left;
display: inline; }
.con-left
{ width: 500px; }
.con-right
{ width: 500px; }
The problem is the size of the tab does not expand for the amount of text that is insidethe div - as shown in the image below. How can I set the CSS so that the tabs will recognise the content within the <div> tags?
you can't set a width on inline elements - make them inline-block and remove the float so the wrapper will wrap properly.
If you want to keep the float then, either use a clear after your floated elements or add overflow:auto to the wrapper
If you want to use floats, you need to clear them.
You could try:
.content-wrapper {
width: 100%;
margin: 0 auto;
overflow: auto;
}
Setting overflow: auto on the containing block will enclose all your floats as you expect.
I am trying now since hours, nothing helps.
Just simple:
I have two divs with variable (dynamic) width.
Both should be side by side in a wrapper div, that has a fixed width.
Everything I try: I see leftDiv and rightDiv either floating to the left or centered, but div2 under div1.... Thanks a lot.
<div class='wrapper'>
<div class='innerWrapper'>
<div class='leftDiv'>
</div>
<div class='rightDiv'>
</div>
</div>
</div>
What is the correct css? The problem is, that it does not work to give the innerWrapper automatically the width of both divs (leftDiv and rightDiv...)...
I tried:
.wrapper {
width: 600px;
text-align: center;
}
.innerWrapper {
width: auto;
}
.leftDiv {
display: inline-block;
}
.rightDiv {
display: inline-block;
}
Use display: inline-block; on those divs ..
http://jsfiddle.net/RK6R4/
I have 3 divs in a parent div which looks like this:
<div id="maincontent>
<div class="left"></div>
<div class="mainbody"></div>
<div class="right"></div>
</div>
The website is 1000px wide.
What I need is to keep the .mainbody div at a minimum of 570px, but have it expand if one of the other 2 divs is removed from the page, which are each given 215px width.
All 3 divs are also floated left.
I tried using min-width and max-width on .mainbody but it doesn't really work. Any other ideas?
My current CSS:
#maincontent {
width: 100%;
overflow: hidden;
}
.left, .right, .mainbody {
float: left;
}
.left, .right {
width: 215px;
}
.mainbody {
width: 570px;
}
CSS Only Solution 1
This assumes the question was accurate in stating "if one of the other 2 divs is removed from the page."
See this fiddle which uses the following code, the key part of which is the :first-child and :last-child change based off your html structure change that you mention. When the left is deleted, the mainbody becomes the first-child and when the right is deleted the mainbody becomes the last-child, so you reset the width if such occurs.
Key CSS
.mainbody {
width: 570px;
float: left;
}
.mainbody:first-child,
.mainbody:last-child {
width: 785px;
}
.left,
.right {
width: 215px;
float: left;
}
CSS Only Solution 2
This accounts for the div remaining, but having no content and being zero width (which is apparently what the situation actually is).
There is a CSS only solution (see this fiddle), but it requires one to restructure the HTML order of the elements and to adjust how they are floated.
Needed HTML Structure (mainbody is last)
<div id="maincontent1">
<div class="left"></div>
<div class="right"></div>
<div class="mainbody"></div>
</div>
Key CSS
.mainbody {
min-width: 570px;
overflow: hidden; /* this triggers expansion between left/right */
}
.left {
width: 215px; /* this is assumed to be zero if no content in div */
float: left;
}
.right {
width: 215px; /* this is assumed to be zero if no content in div */
float: right;
}
Just ad and event to the function. .click(), .ready() etc
if($('.right').is(':visible') == false){
$('.mainbody').width(785+'px');
}
else{ }
or use .size() / .length()
I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows:
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
If I attempt to float the right and left divs to their respective positions (right and left), it seems to ignore the content div's background-color. And other code that I have tried from various websites doesn't seem to be able to translate to my structure.
Thanks for any help!
This works good for me. I have divided the screen into two halfs: 20% and 80%:
<div style="width: 20%; float:left">
#left content in here
</div>
<div style="width: 80%; float:right">
#right content in there
</div>
When you float those two divs, the content div collapses to zero height. Just add
<br style="clear:both;"/>
after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.
Another way to do this is to add overflow:hidden; to the parent element of the floated elements.
overflow:hidden will make the element grow to fit in floated elements.
This way, it can all be done in css rather than adding another html element.
None of the answers given answer the original question.
The question is how to separate a div into 2 columns using css.
All of the above answers actually embed 2 divs into a single div in order to simulate 2 columns. This is a bad idea because you won't be able to flow content into the 2 columns in any dynamic fashion.
So, instead of the above, use a single div that is defined to contain 2 columns using CSS as follows...
.two-column-div {
column-count: 2;
}
assign the above as a class to a div, and it will actually flow its contents into the 2 columns. You can go further and define gaps between margins as well. Depending on the content of the div, you may need to mess with the word break values so your content doesn't get cut up between the columns.
The most flexible way to do this:
#content::after {
display:block;
content:"";
clear:both;
}
This acts exactly the same as appending the element to #content:
<br style="clear:both;"/>
but without actually adding an element. ::after is called a pseudo element. The only reason this is better than adding overflow:hidden; to #content is that you can have absolute positioned child elements overflow and still be visible. Also it will allow box-shadow's to still be visible.
For whatever reason I've never liked the clearing approaches, I rely on floats and percentage widths for things like this.
Here's something that works in simple cases:
#content {
overflow:auto;
width: 600px;
background: gray;
}
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
background: white;
}
#left { float:left; }
#right { float:right; }
If you put some content in you'll see that it works:
<div id="content">
<div id="left">
<div id="object1">some stuff</div>
<div id="object2">some more stuff</div>
</div>
<div id="right">
<div id="object3">unas cosas</div>
<div id="object4">mas cosas para ti</div>
</div>
</div>
You can see it here: http://cssdesk.com/d64uy
Make children divs inline-block and they will position side by side:
#content {
width: 500px;
height: 500px;
}
#left, #right {
display: inline-block;
width: 45%;
height: 100%;
}
See Demo
You can use flexbox to control the layout of your div element:
* { box-sizing: border-box; }
#content {
background-color: rgba(210, 210, 210, 0.5);
border: 1px solid #000;
padding: 0.5rem;
display: flex;
}
#left,
#right {
background-color: rgba(10, 10, 10, 0.5);
border: 1px solid #fff;
padding: 0.5rem;
flex-grow: 1;
color: #fff;
}
<div id="content">
<div id="left">
<div id="object1">lorem ipsum</div>
<div id="object2">dolor site amet</div>
</div>
<div id="right">
<div id="object3">lorem ipsum</div>
<div id="object4">dolor site amet</div>
</div>
</div>
Best way to divide a div vertically --
#parent {
margin: 0;
width: 100%;
}
.left {
float: left;
width: 60%;
}
.right {
overflow: hidden;
width: 40%;
}
Pure old school CSS
I know this post is old, but if any of you still looking for a simpler solution.
#container .left,
#container .right {
display: inline-block;
}
#container .left {
width: 20%;
float: left;
}
#container .right {
width: 80%;
float: right;
}
If you don't care old browser and need a simple way.
#content {
display: flex;
}
#left,
#right {
flex: 50%;
}
Floats don't affect the flow. What I tend to do is add a
<p class="extro" style="clear: both">possibly some content</p>
at the end of the 'wrapping div' (in this case content). I can justify this on a semantic basis by saying that such a paragraph might be needed. Another approach is to use a clearfix CSS:
#content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#content {
display: inline-block;
}
/* \*/
* html #content {
height: 1%;
}
#content {
display: block;
}
/* */
The trickery with the comments is for cross-browser compatibility.
This is best answered here Question 211383
These days, any self-respecting person should be using the stated "micro-clearfix" approach of clearing floats.
Make font size equal to zero in parent DIV.
Set width % for each of child DIVs.
#content {
font-size: 0;
}
#content > div {
font-size: 16px;
width: 50%;
}
*In Safari you may need to set 49% to make it works.
Divide a division in two columns is very easy, just specify the width of your column better if you put this (like width:50%) and set the float:left for left column and float:right for right column.