I am looking to horizontally (and preferably vertically) align three inner divs. Applying margin: 0 auto; to class vbox should do the trick but as in the following minimal code, it isn't affecting the alignment at all. How can i accomplish this aligning?
HTML:
<body>
<div id='site'>
<div class='main'>
<div class='vbox'>
<div id='inner1'>inner1</div>
<div id='inner2'>inner2</div>
<div id='inner3'>inner3</div>
</div>
</div>
</div>
</body>
CSS:
#site {
width: 100%;
height: 100%;
}
#main {}
.vbox {
margin: 0 auto;
}
The result can be seen in this fiddle.
You need to define the width for vbox:
.vbox {
margin: 0 auto;
width: 30%;/*apply as your own*/
}
100% wide element is centered horizontally but you see no alignment for text. For this you should apply text-align: center;
Just give display: table; to .vbox will make it horizontal center.
.vbox {
margin: 0 auto;
display: table;
}
Working Fiddle
Another solution is display: flex;
.main {
display: flex;
}
Fiddle
You can use display: inline-block for your inner divs:
.vbox {
text-align: center;
font-size: 0; /* white spaces fix */
}
.vbox > div {
font-size: 1rem; /* white spaces fix */
display: inline-block;
}
Example
Try something like this
#site {
width: 100%;
height: 100%;
}
#main {
Width:100%;
}
.vbox {
margin: 0 auto;
padding:0;
}
.vbox div{
width:32%;
display:inline-block;
padding:0;
margin:0;
box-sizing:border-box;
}
The important bit is that the default behavior of a div is to take up the full width of its parent. To change this you give it the display mode inline-block.
You could do this :
HTML
<body>
<div id='site'>
<div class='main'>
<div class='vbox'>
<div class='inner'>inner1</div>
<div class='inner'>inner2</div>
<div class='inner'>inner3</div>
</div>
</div>
</div>
</body>
CSS
#main {
width: 100%;
}
.vbox {
width: 500px;
margin: 0 auto;
text-align: center;
}
.inner {
display: inline-block;
margin: 0 4px;
}
You could do this to align all 3 divs vertically by using:
#site {
width: 100%;
height: 100%;
}
#main {}
.vbox {
margin: 0 auto;
}
.vbox div{
width: 30%;
float: left;
}
If you have more divs or less, just update the width accordingly.
Related
I have 2 divs within another container div. I want these 2 divs to be centered vertically in their parent container
<div class="wrapper">
<div class="div1"> some contents here</div>
<div class="div2"> some contents here</div>
</div>
Div1 and Div2 both have different dimensions and height specifically)
This is my css:
.wrapper{width:100%;
display:inline-block;
margin:0 auto;
}
.div1{max-width:760px;
display:inline-block;
margin:0 auto;}
.div2{max-width:540px;
height:auto;
display:inline-block;
margin:0 auto;
vertical-align:top
}
Contents of div1 and div2 are responsive elements(either images or a slideshow)
All I want is for Div 2 to be centered vertically in the main wrapper because it is a bit smaller than Div1.
Any leads where to start?
I am trying to avoid using top margins on div2 because it gets very messy on mobile.
I would recommend using flexbox. Here's a fiddle showing how it works
https://jsfiddle.net/m0nk3y/xchy52u7/
CSS:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 100%;
background: green;
}
.div1 {
max-width: 760px;
height: 100px;
background: gold;
}
.div2 {
max-width: 540px;
height: 50px;
vertical-align: top;
background: silver;
}
.wrapper {width:100%;
display:flex;
margin:0 auto;
align-items: center;
}
optionally, you may want to add flex-wrap:wrap; and justify-content: with a value of space-around or space-between
give the divs width:100%; and add clear: both; and make the container text-align: center; see code snippet
.wrapper{width:100%;
display:inline-block;
margin:0 auto;
text-align: center;
}
.div1 {
max-width: 760px;
width: 100%;
display: inline-block;
margin: 0 auto;
clear: both;
text-align: center;
}
.div2 {
max-width: 540px;
width: 100%;
height: auto;
display: inline-block;
margin: 0 auto;
vertical-align: top;
clear: both;
text-align: center;
}
<div class="wrapper">
<div class="div1"> some contents here</div>
<div class="div2"> some contents here</div>
</div>
I have 3 elements that I would like to align horizontally, without gaps in between, and centered. I've accomplished lining them up horizontally and equally spaced, but want the touching, ie, to not have white space between them but to also take up 100% width of the page. This is generic html but applies to what I've done on my actual page:
CSS:
.content{
width: 100%;
height: 400px;
background-color:white;
text-align: justify;
}
.content .featureitem{
height: 100%;
width: 33%;
display: inline-block;
background-color:bisque;
margin: 0;
}
.content:after{
content: "";
width: 100%;
display: inline-block;
}
HTML:
<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>
I've tried using display:flex, but that leaves a gap on the right hand side. I want to achieve a row of 3 divs, that span 100% of the width with no gaps in between.
You can achieve this by removing the display: inline-block and adding float: left. Also you should consider calculating your width, since 3*33% != 100%:
.content .featureitem{
height: 100%;
width: calc(100%/3);
//display: inline-block;
float: left;
background-color:bisque;
margin: 0;
}
Fiddle
If you'd like to stick with display: inline-block; for layout, there are a number of ways to fight the space between inline block elements. There a number of good solutions in the CSS Tricks article. I typically use the negative margin option (it hasn't come back to bite me in a major way yet):
nav a {
display: inline-block;
margin-right: -4px;
}
or
nav a {
display: inline-block;
margin-right: -2px;
margin-left: -2px;
}
If you're open to another layout, you can use flexbox, or even center a float-based layout with a parent <div>, if that makes sense.
if you use inline-block elements and have indentation in the HTML code, there will be a white space in between each of them.(just like the one you leave in between words)
you may avoid any gap in html or use display : flex or table layout.
You can use HTML comment <!-- comment -->to erase the gap
.content{
width: 100%;
height: 400px;
background-color:white;
text-align: justify;
}
.content .featureitem{
height: 100%;
width: 33.33%;
display: inline-block;
background-color:bisque;
margin: 0;
}
.content:after{
content: "";
width: 100%;
display: inline-block;
}
<div class="content">
<div class="featureitem"></div><!--
--><div class="featureitem"></div><!--
--><div class="featureitem"></div>
</div>
or table/table-cell display
.content {
width: 100%;
height: 400px;
background-color: white;
text-align: justify;
display: table;
}
.content .featureitem {
height: 100%;
width: 33.33%;
display: table-cell;
background-color: bisque;
margin: 0;
}
<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>
or display:flex and flex:1
.content {
width: 100%;
height: 400px;
background-color: white;
text-align: justify;
display: flex;
}
.content .featureitem {
height: 100%;
flex: 1;
background-color: bisque;
}
.content:after {
content: "";
width: 100%;
display: inline-block;
}
<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>
<div class="table">
<div class="sidebar"></div>
<div class="content"></div>
</div>
* {
margin:0; padding:0;
}
html, body {
width:100%;
height:100%;
}
.table {
display:table;
width:100%;
height:100%;
}
.sidebar {
width:200px;
height:100%;
background:red;
display:table-cell;
white-space:nowrap;
vertical-align: top;
}
.content {
width:100%;
height:100%;
background:orange;
display:table-cell;
vertical-align: top;
}
What am I missing exactly? :), trying to replicate this structure:
http://dev.brigademarketing.com/brigade/old-content/site1/
fiddle:
http://jsfiddle.net/8o50f0cf/
Remove the width:100% from the dynamic column, so it can calculate its width automatically.
Updated Fiddle
A display: table-cell element acts like a <td>, meaning that it takes the remaining space of its table parent if no width is define.
Here's a solution that uses calc() function and floating: http://jsfiddle.net/jyx9orLy/.
HTML:
<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body, .container {
height: 100%;
}
.container .sidebar {
height: 100%;
background-color: red;
width: 200px;
float: left;
}
.container .content {
float: left;
height: 100%;
width: calc(100% - 200px);
background-color: orange;
}
A second solution is to use a table, which you are doing, and to make it work you do what #LcSalazar mentioned.
A third solution uses flexbox specification and requires a modern browser: http://jsfiddle.net/yp49uqay/.
CSS:
* {
margin: 0;
padding: 0;
}
html, body, .container {
height: 100%;
}
.container {
display: flex;
flex-direction: row;
}
.container > .sidebar {
flex: 0 0 200px;
background-color: red;
}
.container > .content {
flex: 1 1 auto;
background-color: orange;
}
And, a fourth solution that uses floating in a different way: http://jsfiddle.net/079sr0fu/.
HTML:
<div class="container">
<div class="sidebar"></div>
<div class = "contentWrapper">
<div class="content">Content...</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body, .container,
.container > .sidebar,
.container > .contentWrapper,
.container > .contentWrapper > .content {
height: 100%;
}
.container > .sidebar {
width: 200px;
background-color: red;
float: left;
}
.container > .contentWrapper {
overflow: hidden;
}
.container .content {
float: left;
width: 100%;
background-color: orange;
}
I am trying to center text and images on a "content" div. I tried (margin: 0 auto;) and couple more and still not getting it. Also trying to center the div on the screen.
CSS:
#content {
width: 100%;
}
#content img {
width: 50%;
opacity: 0.75;
}
#content img:hover {
opacity: 1;
}
HTML:
<div id="content">
<img src="images/intro_7.jpg">
</div>
In #content, add text-align:center;:
#content {
width: 100%;
text-align:center;
}
UPDATE
Use table and table-cell to center is horizontally and vertically.
Surround your HTML with three div as follows:
<div class="outter">
<div class="center">
<div class="inner">
CSS:
.outter {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.center {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
}
JSFiddle Demo
More info here for vertical alignment.
Note: IE7 and below do not support display:table; or display: table-cell;
For some reason, I can't seem to center this list element in the page. It contains three equally-sized boxes, and I'd like them to always stick to the center.
body {
width: 100%;
}
.boxes {
display: block;
margin: 0 auto;
}
.box-container {
display: block;
margin: 0 auto;
border: 1px solid blue;
}
.all {
float: right;
width: 100px;
height: 100px;
background: red;
margin: 10px 10px 10px 10px;
}
.clear {
clear: both;
}
<body>
<div class="box-container">
<div class="box1 all"></div>
<div class="box2 all"></div>
<div class="box3 all"></div>
<div class="clear"></div>
</div>
</body>
For margin: auto to work, your elements need to have a width given to them somehow (usually through width). The usual solution to make things scale automatically is display: inline-block; (though flexbox makes this much easier when supported):
.box-container {
display: inline-block;
text-align: left;
}
Then you’d give its parent text-align: center;. Alternatively, width: 300px; (with perhaps a minor adjustment or removal of spaces) seems like it could work well here; it depends on your actual layout.
body doesn’t need width: 100%;, by the way.
For everything you want to center horizontally, you should set its margin-left and margin-right to 'auto'.
Give your box container a width:
CSS
.box-container {
display: block;
margin: 0px auto;
width: 360px;
border: 1px solid blue;
}
Example here: http://jsfiddle.net/82WCU/
Remove the float: right from each the all class. That is causing the boxes to move to the right. Make the box-container center aligned (this will bring them to the center), and change the display of each box to inline-block.
.box-container {
display: block;
margin: 0 auto;
border: 1px solid blue;
text-align: center;
}
.all {
width: 100px;
height: 100px;
background: red;
margin: 10px 10px 10px 10px;
display: inline-block;
}
Try:
.box-container {
text-align:center;
}
.all {
display:inline-block;
}
NOTE:
inline-block leaves white-space between elements. To remove this space, write elements on same line rather than writing them on separate lines.
Change:
to
<div class="box-container">
<div class="box1 all"></div><div class="box2 all"></div><div class="box3 all"></div>
</div>
DEMO here.
Try This it work perfectly:
HTML
<body>
<div class="box-container">
<div class="box1 all"></div>
<div class="box2 all"></div>
<div class="box3 all"></div>
<div class="clear"></div>
</div>
</body>
css
body {
width: 100%;
}
.boxes {
display: block;
margin: 0 auto;
}
.box-container {
display: block;
margin: 0 auto;
border: 1px solid blue;
}
.all {
background: none repeat scroll 0 0 red;
float: right;
height: 100px;
margin-right: 13%;
width: 100px;
}
.clear {
clear: both;
}