I am building a two column layout and I want to keep the total column inside a wrapper in the center of the screen even if it's resized. I have tried floating some CSS divs but not helping.
This is my layout:
<div class="wrapper"><div class="leftCol">Left</div><div class="rightCol">Right</div></div>
CSS:
.wrapper{ width:720px; text-align:centre;}
.leftCol{ width:200px; float:left;}
.rightCol{ width:510px; float:right;}
All you need to do is set the wrapper as such
CSS:
.wrapper { width:720px; margin:0px auto;}
Furthermore I would recommend using a bit more responsive CSS with percentage to fit with the width as well, so that it doesn't look really tiny on larger screens.
You can try the margin trick here on the wrapper class.
.wrapper{ width:720px; margin: 0 auto; }
Please try below css
.wrapper{ width:720px; text-align:centre; margin: 0 auto;}
.leftCol{ width: 30%; margin: 0 auto; display: inline-block;}
.rightCol{ width: 70%; margin: 0 auto; display: inline-block; }
Float removes your children DIV elements from a static document flow.
DIV elements being block-level elements, unless set as inline or inline-block will not in any case apply to the parent's text-align property.
You have more possibilities, the most common are:
.wrapper{
width: 720;
margin: 0 auto; /* keeps me centered */
overflow: auto; /* to contain floated child elements.
Or use a .clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */
}
or using text-align: center;
.wrapper{
width: 720;
margin: 0 auto; /* keeps me centered (use anyways) */
text-align: center; /* my children are not block-level elements */
}
.leftCol{
display:inline-block;
width:200px;
/* text-align: left; probably you might want to reset text alignment */
}
.rightCol{
display: inline-block;
width:510px;
}
I would discourage you from using (in 2016.+) fixed widths. Use another more responsive unit like % or vw
Related
Please check the CSS below.
/*rex is the container of ex,ex2,ex3*/
div.rex{
height:200px;
border:0px;
margin:60px auto;
padding: 0;
vertical-align:top;
}
div.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
div.ex2{
width:0.5%;
height:200px;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
div.ex3{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
The result in browser:
What I need:
This is actually expected behavior in HTML. Because you are using inline-block, any newline character or whitespace you have after the element and before another inline element, will be counted as a space. If you want the blocks to stack side by side like in your picture, your HTML would need to be like this.
<div class="rex">
<div class="ex"></div><div class="ex2"></div><div class="ex3"></div>
</div>
working demo
It's not very pretty, but then again, I would recommend using another approach, possibly floating the elements instead.
Refer to here for a more in depth explanation of why this occurs.
How to remove the space between inline-block elements?
Just extending answer giving by #Tristan here.
You have repeated the css code unnecessarily. You can minify it by using multiple css like :
.ex, .ex2, .ex3 {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
height: 100%; /* no need of height: 200px; here */
} /* if you need to extend it to parent height */
/* then use height: 100% */
OR
div.rex > div { /* code here */ }
You can keep elements side by side by using any of the below approaches:
Using display: table-cell
Using float: left
Using display: inline-block (check #Tristan's solution)
Add float:left; to your div.ex, div.ex2 and div.ex3 instead.
JSFIDDLE
UPDATE:
Add position:absolute to second and third div if float is not a choice.
FIDDLE
UPDATE 2:
Add this to only 3rd div if you need that space in between.
FIDDLE
You can sue comments like that (this looks little better in code):
<div class="rex">
<div class="ex"><!--
--></div><div class="ex2"></div><!--
--><div class="ex3"></div>
</div>
My trick is to set font-size:0; in the parent element, because it's the font-size that is causing the math to not add up perfectly ( about a 4px overlap per div, depending on screen size ) and causes one div to appear under the other.
.rex{
display:block;
font-size:0;
}
.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
vertical-align:top;
margin: 0 .5% 0 0; /*small space between divs*/
padding: 0;
font-size:16px; /*restore font size*/
}
.ex2{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
vertical-align:top;
margin: 0;
padding: 0;
font-size:16px;
}
For some reason, margin:auto is not working.
HTML
<body>
<div id="background">
<div id="header">
<div id="title">Welcome</div>
</div>
</div>
</body>
CSS
#background {
min-width: 960px;
}
#title {
display: block;
margin: auto;
background-color: blue;
}
This just just draws a blue line across the top of the screen with the word 'Welcome' on the left. Why isn't my margin:auto working?
The correct syntax for horizontally centering via margin is: margin: 0px auto; as this will set the left and right margin to auto. You need to set a width on it if you use this approach, because the width is 100% by default.
Alternatively, you can also use text-align:center if you are just centering text.
Working jsFiddle using text-align:center.
Alternative jsFiddle.. I don't know what style you are trying to achieve.
The #title div will expand to fill its parent, #header, which in turn, expands to fill its own parent, #background, which has a width of at least 960px.
Therefore, #title if full width so it is centered, and by default, the text is left justified (at least in Western European languages).
If you want the #title to have a shrink-to-fit width, you can try display: inline-block.
To center #title horizontally, add text-align: center to its parent container, #header.
For example:
#background {
min-width: 960px;
}
#header {
text-align: center;
}
#title {
display: inline-block;
background-color: beige;
}
Alternatively, you can achieve the same result using display: table:
.ex2 #header {
text-align: left;
}
.ex2 #title {
display: table;
margin: 0 auto;
background-color: beige;
}
See demo at: http://jsfiddle.net/audetwebdesign/kAhnx/
How to center several boxes in CSS? Suppose I have a div "navigation". Now, the navigation margin is auto, that is, it is in the center, how would I add lists(display:inline) inside navigation that will expand navigation on both sides. I haven't set the width property so the width will be dynamically expanding. Its like float :center.
Set margin:auto and width:940px and you are done. You can change width as per your need. But giving some width is compulsory.
Check this fiddle and tell me if it helped you.
http://jsfiddle.net/JNMZ3/4/
You can change padding of the li elements for more space. And then adjust width of the navigation div to keep it in center.
try this
your css replace with
http://jsfiddle.net/JNMZ3/3/
.navigation li{
margin: 3px 6px 3px 6px;
display: inline;
border: 2px solid black;
padding: 2px;
zoom:1;
width:auto;
}
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 100px;
background:red;
float:left;
}
.rightsidebar {
background:blue;
height: 608px;
width: 100px;
float:right;
}
.content {
width: auto;
margin:0 auto;
background:yellow;
height:608px;
}
I have the following Html code
<div id="team">
<h1>Team</h1>
<img src="assets/divider.png" id="divider">
<img src="assets/team.png" id="team_pic">
</div>
The following CSS
div#team {
margin: 0 auto;
margin-left:auto;
margin-right:auto;
right:auto;
left:auto;
}
However, the child elements divider and team pic are all the way to the left. I though margin:auto would center everything.
then I put the following into the child elements.
div#team img#team_pic {
width:704px;
height:462px;
margin-left:auto;
margin-left:auto;
}
Nope, nothing happen, the elements still to left and not centered.
You need to set a width to #team, for example:
div#team {
margin: 0 auto;
width: 800px;
}
... which is a shorthand version of:
div#team {
margin-top: 0;
margin-left: auto;
margin-bottom: 0;
margin-right: auto;
width: 800px;
}
Images are inline level elements by default. You need to use display:block; if you want your images and margin to work properly.
img{
display: block;
}
float will upset this too.. float:none; does the trick if you think it may be inheriting a 'float' directive from another rule somewhere.
Team needs to have a width to be able to use margin: auto.
div#team {
margin: 0 auto;
width: 400px;
}
Here is a fiddle: JS Fiddle
*Use the
display:block;
for the images classes.*
#team {
margin: auto;
width: 400px;
}
Basically margin depends on width if and only if we want to show our div in the center of the page.
If you donot want to give fixed width then we can go for width: max-content;
#team {
width: max-content;
margin: 0 auto;
}
I have a simple layout that consists of a #container with
#container {
width: 775px;
margin: 0 auto;
}
to center it on the page with a maximum width of 775px
Then inside of that I have another div whose width varies depending on the content inside of it
.innerdiv { margin: 0 auto; }
I want it so if the .innerdiv is less than 775px, it will center within that 775px region.
The problem is that the above code is not working. I've wrestled with it for a bit but can't figure out what I need to do to accomplish this.
Using “margin: 0 auto;” in Internet Explorer 8
...“margin: 0 auto” centers a block, but only when width of the block is set to be less that width of parent.
To align a div to center.. use margin: 0 auto; but you must specify the width attribute of the . width: 400px; that must be less than the parent container <div>
for more information follow this link Link
write like this:
#container {
width: 775px;
margin: 0 auto;
text-align:center;
}
.innerdiv {
display:inline-block;
*display:inline /* IE */
*zoom:1;/* IE */
text-align:left;
}
Check this
http://jsfiddle.net/efEgq/
Give relative position to #container
#container {
width: 775px;
margin: 0 auto;
position:relative;
}
try this.
Just write align="center" for innerdiv.