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;
}
Related
I have divs that i want to wrap to the next line when the browser window gets smaller. I also want margin to be put in between the divs so that there's a gap between them. The problem I'm having is that the margin on the centre divs causes the divs to wrap incorrectly if the browser is set to a specific size. At a certain size you have 2 divs underneath one div. See my screenshot below as an example and this fiddle: http://jsfiddle.net/uhh2jwe2/ (change the width of the window)
This really needs to be dynamic as it will be a framework solution for laying out differently sized divs. The parent div will be fluid similar to the example. Any help would be great
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
You can use media queries to alter the css on smaller screen.
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#media (max-width: 435px) {
#outer > div {
margin-right:auto;
margin-left:auto;
margin-bottom:15px;
float:none;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
Use Media query like this:
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
I would recommend a solution that extracts the grid-elements from the content-elements. Therefore you have a lot more control about your layout and you can be more flexible with content you want to place into it.
Use your .inner elements as grid-elements and wrap content inside them into .inner-content
Wrap all inners into a row to get rid of the outer-gutter
Give the .inner elements a percentage-width and a px-max-width. So the elments can take alwyay 33.33% of the avaiable width but never more then 150px.
I added some adjustments for small screens, so the .inner elements wrap below each other and take more then 33.33% of the .outer container width.
Inspect the code: http://jsfiddle.net/uhh2jwe2/5/
* {
box-sizing: border-box;
}
/* flexible outer container */
.outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: hidden;
background-color: red;
}
/* remove outer gutter */
.row {
margin: 0 -10px;
}
/* .inner will take care of the width */
.inner {
width: 33.33%;
max-width: 150px;
float: left;
padding: 0 10px;
}
/* .inner-content take care of the height */
.inner-content {
height: 150px;
color: #fff;
background: blue;
}
#media (max-width: 435px) {
/* this wraps .inner elements below each other and extends width */
.outer .inner {
padding: 10px 0;
width: 100%;
max-width: 100%;
float:none;
}
}
<div class="outer">
<div class="row">
<div class="inner">
<div class="inner-content">1</div>
</div>
<div class="inner">
<div class="inner-content">2</div>
</div>
<div class="inner">
<div class="inner-content">3</div>
</div>
</div>
</div>
I would suggest to use bootstrap's technique for that. Have padding on both sides of your inner elements, and negate it with negative margin on the container.
This will require more markup tough. While .row and .container could be merge on the same element, the background-color would overflow to the left because of the negative margin.
.container {
background-color: green;
width: 510px;
}
.row {
font-size: 0;
margin: 0 -15px;
}
.block {
font-size: 12px;
padding: 0 15px;
display: inline-block;
}
.content {
width: 150px;
height: 150px;
background-color: red;
}
<div class="container">
<div class="row">
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
</div>
</div>
in your example, the first two divs are 170px wide (150+20), and the third is 150px wide because it doesn't have a margin, thats the problem.
avoid #media if you mant it to be fully responsive and not jumping from 4 items a line to 1 item a linefor example.
you can solve your issue by simply adding a margin-right:20 to your last element, but it is better to to like so :
.inner1, .inner2, .inner3{
float: left;
width: 150px;
height: 150px;
margin: 2px 10px; //left & right sides to half of 20px
background-color: blue;
}
because it will split the margin to the two sides, making it more symetrical.
For laying out differently sized divs.
if all your divs can change size but stay equal, it will work, but if the first div is 70 and the 2nd and 3rd are 50, there will always be two divs on the bottom line at some point.
I think I've found the simplest solution to what I'm trying to do without having to use media queries. I simply added the right margin to all fields including the last field rather than adding it to every field except the final field.
I then wrap all the fields in another div and add a minus margin (the same size as the gaps) so that the fields will wrap when they hit the side of the container. Here's a fiddle with the solution: http://jsfiddle.net/rahg1ky3/
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
#inner {
margin-right: -20px;
}
.cont {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
<div id="outer">
<div id = "inner">
<div class="cont">1</div>
<div class="cont">2</div>
<div class="cont">3</div>
</div>
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Why is there a margin between divs? I tried to remove it by different methods but nothing worked. I had to reduce their width to stack them in rows.
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: 5% auto;
padding: 0;
}
.box{
display: inline-block;
margin: 0px;
background-color: #f1f1f1;
width: 248px;
height: 250px;
border: 0 !important;
font-size: 0;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Make the width of .box 250px and add an attribute of 'float: left' to .box
.box{
display: inline-block;
margin: 0px;
padding: 0;
background-color: #ff9900;
width: 250px;
height: 250px;
float: left;
}
Fiddle
Due to your display: inline-blocks, the white spaces appear in between your block elements.
There are many resolutions to the same, refer to David Walsh's blog
What I would prefer to do here is use float instead of display: inline-block.
Refer code:
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: 5% auto;
padding: 0;
}
.box{
float: left;
margin: 0px;
background-color: #f1f1f1;
width: 248px;
height: 250px;
}
<div class="wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
The problem is that there are spaces between the div's. Two possible solutions:
1:
<div class="wrapper">
<div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div>
</div>
-
.box { display: block; } // not multiple elements in one line, if you want this
2:
.wrapper { font-size: 0px; }
.box { display: block; } // not multiple elements in one line, if you want this
Its not margin what is causing space between two div its because of display:inline-block which you have added to box class, just add float: left; to same and it will go away.
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: 5% auto;
padding: 0;
}
.box{
display: inline-block;
margin: 0px !important;
background-color: #f1f1f1;
width: 248px;
height: 250px;
border: 0 !important;
float: left;
}
<div class="wrapper">
<div class="box" style="background: rebeccapurple;">
</div>
<div class="box" style="background: orange;">
</div>
<div class="box" style="background: orange;">
</div>
<div class="box" style="background: rebeccapurple;">
</div>
</div>
Try setting border: 0 !important on all divs affected, once I had a similar problem and found that the divs were inheriting a 1px border that was breaking the width.
You are displaying them as inline blocks, so the white space between them in the formatting of your code is still being displayed just as it would had they been any other inline element.
You need to reformat your code, or set the wrapper to have a zero font size so they do not get rendered.
Try using
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: auto;
padding: 0;
display: block;
background: green;
}
.box{
display: block;
margin: 0px;
width: 248px;
height: 250px;
background: red;
padding: 0;
float: left;
}
Display: inline-block creating that margin.
Or may be you could try
.wrapper{font-size: 0;}
.box{ display:inline-block;}
I am attempting to create a full-width banner with three internal inline elements. A back link, a logo and a forward link.
I would also like to use the same code to create a full-width banner with TWO internal inline elements. A left back link and a central logo.
What I have so far, is:
HTML
<section id="header-blue">
<div id="header-wrap">
<div class="header-left"><p>1</p></div>
<div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
<div class="header-right"><p>3</p><p>3</p></div>
<div class="clearfix"></div>
</div>
</section>
SCSS:
#header-blue {
width: 100%;
margin-bottom: 50px;
height: auto;
background-color: $primary-blue;
color: #fff;
#header-wrap {
text-align: center;
border: 1px solid green;
margin: 0 auto;
padding: 1rem 2.5rem;
div {
display: inline-block;
vertical-align: middle;
}
}
.header-left {
float: left;
border: 1px solid red;
width: 100px;
}
.header-right {
float: right;
border: 1px solid red;
width: 100px;
}
.header-center {
border: 1px solid red;
margin: 0 auto !important;
display: inline-block;
width: 100px;
}
} // header-blue
I am looking for a solution that is widely supported, so I'm not sure if that rules flex out?
The result is this: FIDDLE
EDIT:
THE FINAL CORRECT DESIGN WHEN COMPLETE
Disclaimer: Please understand that although this may be viewed as a 'duplicate' post, after a fair few hours of online research and trial and error, I am still no further progressed. I would, therefore, like to seek help unique to this problem and learn in the process.
You can build the layout with CSS flexbox.
For clarity and conciseness, I removed several non-essential decorative styles from the original code. I also used compiled CSS for the benefit of those who don't use preprocessors.
layout 1: [left] [center] [right]
#header-wrap {
display: flex; /* 1 */
align-items: flex-start; /* 2 */
justify-content: space-between; /* 3 */
text-align: center;
padding: 1rem 0;
}
#header-blue { margin-bottom: 50px; background-color: #3498DB; color: #fff; }
.header-left { border: 1px solid red; width: 100px; }
.header-right { border: 1px solid red; width: 100px; }
.header-center { border: 1px solid red; width: 100px; }
<section id="header-blue">
<div id="header-wrap">
<div class="header-left">
<p>1</p>
</div>
<div class="header-center">
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
</div>
<div class="header-right">
<p>3</p>
<p>3</p>
</div>
</div>
</section>
Notes:
Establish flex container.
Prevent flex items from expanding full height (a default setting). The flex-start value will align each item at the start of the cross axis of the container. In this case, that's the top of the vertical (Y) axis. If you want the items vertically centered, use the center value instead. The default value is stretch.
Align flex items horizontally in the container. You can also try justify-content: space-around. Note that this method will only center the middle item in the container if the left and right elements (the back/forward links) are equal width. If the links vary in length, you'll need to use another method (see boxes #71-78 here).
layout 2: [left] [center]
#header-wrap::after { /* 4 */
content: "";
width: 100px;
}
#header-wrap {
display: flex; /* 1 */
align-items: flex-start; /* 2 */
justify-content: space-between; /* 3 */
text-align: center;
padding: 1rem 0;
}
#header-blue { margin-bottom: 50px; background-color: #3498DB; color: #fff; }
.header-left { border: 1px solid red; width: 100px; }
.header-right { border: 1px solid red; width: 100px; }
.header-center { border: 1px solid red; width: 100px; }
<section id="header-blue">
<div id="header-wrap">
<div class="header-left">
<p>1</p>
</div>
<div class="header-center">
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
</div>
</div>
</section>
Notes:
Use an invisible pseudo-element to create equal balance on the opposite end of the container. This is essentially a replacement for the DOM element that was removed from the first example. It keeps the middle item centered.
jsFiddle
Browser Support
Flexbox is supported by all major browsers, except IE 8 & 9.
Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.
For a quick way to add all the prefixes you need, use Autoprefixer.
More details in this answer.
From your structure you could use flex(IE11) and justify-content, then hide .clearfix and remove it when on fourth position:
with 3 (4 including clearfix)
#header-wrap {
display: flex;
justify-content: space-between;
}
#header-wrap > div {
border: solid;
width: 100px;
margin:0 0 auto;/* remove if you want each boxes same height */
}
.clearfix:nth-child(4) {
display: none;
}
.clearfix {
opacity: 0;
}
<section id="header-blue">
<div id="header-wrap">
<div class="header-left"><p>1</p></div>
<div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
<div class="header-right"><p>3</p><p>3</p></div>
<div class="clearfix"></div>
</div>
</section>
when only 2 (3) same CSS involved
#header-wrap {
display: flex;
justify-content: space-between;
}
#header-wrap > div {
border: solid;
width: 100px;
margin:0 0 auto;/* remove if you want each boxes same height */
}
.clearfix:nth-child(4) {
display: none;
}
.clearfix {
opacity: 0;
}
<section id="header-blue">
<div id="header-wrap">
<div class="header-left"><p>1</p></div>
<div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
<div class="clearfix"></div>
</div>
</section>
for older browsers.
with your structure you could use text-align, :after and the selector +:
with 3 (4)
#header-wrap {
text-align: justify;
}
#header-wrap:after {
content: '';
display: inline-block;
width: 99%;
}
#header-wrap > div {
display: inline-block;
vertical-align: top;
border: solid;
width: 100px;
}
#header-wrap > div + div + div +.clearfix {
display: none;
}
.clearfix {
opacity: 0;
}
<section id="header-blue">
<div id="header-wrap">
<div class="header-left"><p>1</p></div>
<div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
<div class="header-right"><p>3</p><p>3</p></div>
<div class="clearfix"></div>
</div>
</section>
and 2(3) same CSS involved:
#header-wrap {
text-align: justify;
}
#header-wrap:after {
content: '';
display: inline-block;
width: 99%;
}
#header-wrap > div {
display: inline-block;
vertical-align: top;
border: solid;
width: 100px;
}
#header-wrap > div + div + div +.clearfix {
display: none;
}
.clearfix {
opacity: 0;
}
<section id="header-blue">
<div id="header-wrap">
<div class="header-left"><p>1</p></div>
<div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
<div class="clearfix"></div>
</div>
</section>
Consider positioning the left and right elements differently.
https://jsfiddle.net/5gxLvp8a/4/
#header-wrap {
text-align: center;
border: 1px solid green;
margin: 0 auto;
padding: 1rem 2.5rem;
position: relative;
div {
display: inline-block;
vertical-align: middle;
}
}
.header-left {
float: left;
border: 1px solid red;
width: 100px;
position: absolute;
left: 25px;
}
.header-right {
float: right;
border: 1px solid red;
width: 100px;
position: absolute;
right: 25px;
}
See code snippet below:
html, html a {
font-size: 10px; }
#header-blue {
width: 100%;
margin-bottom: 50px;
height: auto;
background-color: #3498DB;
color: #fff; }
#header-blue #header-wrap {
text-align: center;
border: 1px solid green;
margin: 0 auto;
padding: 1rem 2.5rem;
position: relative; }
#header-blue #header-wrap div {
display: inline-block;
vertical-align: middle; }
#header-blue .header-left {
float: left;
border: 1px solid red;
width: 100px;
position: absolute;
left: 25px; }
#header-blue .header-right {
float: right;
border: 1px solid red;
width: 100px;
position: absolute;
right: 25px; }
#header-blue .header-center {
border: 1px solid red;
margin: 0 auto !important;
display: inline-block;
width: 100px; }
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both; }
<section id="header-blue">
<div id="header-wrap">
<div class="header-left"><p>1</p></div>
<div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
<div class="header-right"><p>3</p><p>3</p></div>
<div class="clearfix"></div>
</div>
</section>
<section id="header-blue">
<div id="header-wrap">
<div class="header-left"><p>1</p></div>
<div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
<div class="clearfix"></div>
</div>
</section>
Widely supported - my immediate answer is to use display: table;
Let me 'fiddle' around with this for a moment and get back to you - I was just working on something similar yesterday.
EDIT 1:
At first glance, I would advise utilizing classes versus ID's. This deals with a much broader topic (CSS Specificity) but is extremely useful to think about early in your career. That being said, I am working on a solution for you, as I THINK I know what you want.
As the commenter mentioned - it would help ALOT to see what you want to see as an end result. From my interpretation of your screenshots (poor quality & non-descriptive FYI), I feel like you want this header to maintain the left/back button and the logo on mobile devices. However, on a desktop/laptop viewport size, you want a forward button to show itself.
If this is incorrect, please verify!
EDIT 2:
Going off the above poster's JSFiddle, I've come up with a "better" solution that stacks the elements within the header as opposed to going outside of the 'container' that it exists in: https://jsfiddle.net/f815aa6y/1/
Still working on the right solution to get this to vertically align in the middle :)
I am a bit newbie with CSS and i am pretty obfuscated trying to center a group of divs inside a div. What i want:
divs 2,3 and 4 should be centered inside div1.
My approach:
.div1 {
display: inline-block;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
float:center
}
the result is: the 3 divs (2,3 and 4) one on top of another...
Regards,
This can easily be done with table display:
.table-display {
display: table;
width: 100%;
}
.cell-display {
display: table-cell;
}
.div1, .div2, .div3, .div4 {
padding: 40px;
}
.div1 {
background: #ABC;
}
.div2 {
background: #DEF;
}
.div3 {
background: #CAD;
}
.div4 {
background: #FAD;
}
<div class="div1">
<div class="table-display">
<div class="cell-display div2"></div>
<div class="cell-display">
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>
Maybe set a width on .div1 and remove inline-block from .div1
.div1 {
width: 960px;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
}
The most common way to center a block element if you know it's width is to define the width and use "margin: 0 auto". This tells the browser to give a top and bottom margin of 0, and to automatically determine equal margins on the left and right.
Using floats, you can create the layout you described as follows:
http://jsfiddle.net/ynt4suee/
Markup:
<div>
<div id="one" class="border clearfix">one
<div id="wrapper">
<div id="two" class="border">two</div>
<div class="subcontainer">
<div id="three" class="border">three</div>
<div id="four" class="border">four</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
}
div#wrapper{
width: 400px;
margin: 0 auto;
}
div#two{
width: 250px;
float: left;
}
div.subcontainer{
float: right;
width: 130px;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Here's another approach, using inline-block elements for the inner divs instead:
http://jsfiddle.net/xojqq4v5/
Markup:
<div id="one" class="border">
div 1
<div id="wrapper">
<div id="two" class="border">div 2</div>
<div id="subcontainer">
<div id="three" class="border">div 3</div>
<div id="four" class="border">div 4</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
margin-bottom: 5px;
}
div#wrapper{
width: 450px;
margin: 0 auto;
}
div#two, div#subcontainer{
display: inline-block;
vertical-align: top;
}
div#two{
width: 300px;
}
div#three, div#four{
width: 140px;
}
Still, so long as you know the total width of the inner divs, you can center the wrapper using "margin: 0 auto", which has the advantage of not centering text on all child elements unless otherwise specified.
The difference here is that to lay out the inner divs in columns, div 2 and the container div containing divs 3 and 4 are defined as inline-block elements.
I would like to create a header that streatches with the page width.
My header consists of three parts, two sides with fixed width and the middle that stretches.
<div class="bigBlueBox">
<div class="headerBox">
<div class="leftSide"></div>
<div class="middleSide"></div>
<div class="rightSide"></div>
</div>
</div>
I use display: box and box-flex: 1 for the stretching of the middle box.
body {
margin: 0;
padding: 0;
}
.bigBlueBox {
height: 45px;
width: 100%;
background-color: blue;
}
.headerBox {
border: 1px solid red;
color: #FFFFFF;
display: -moz-box;
font-weight: bold;
height: 45px;
margin: auto;
width: 100%;
}
.leftSide {
border: 1px solid yellow;
display: inline-block;
float: left;
height: 45px;
width: 20px;
}
.middleSide {
-moz-box-flex: 1;
display: inline-block;
float: left;
height: 45px;
}
.rightSide {
border: 1px solid green;
display: inline-block;
float: left;
height: 45px;
width: 20px;
}
My problem is that, as you can see in this fiddle, there's a margin I can't get rid of (the red border is not around the blue box).
How can I remove this "margin" ?
Otherwise, is there another way to do it without using boxes ?
Well the solution was very simple, I just had to add some content inside the middle div:
<div class="bigBlueBox">
<div class="headerBox">
<div class="leftSide"></div>
<div class="middleSide"> SOMETHING </div>
<div class="rightSide"></div>
</div>
</div>
Which could also be