This seems so simple. I'm trying to get 10 divs inside a parent div all 10% wide. The parent div is 960px and centered on the page with margin:0 auto and had a red background. It does not matter if I make the with of .tenPercent 10% or 96px. The result is the same, only 9 fit and the 10th wraps. There looks to be a left margin (or padding maybe) on them but what would cause this?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.tenPercent
{
color:Black;
display:inline-block;
border:1px solid black;
width:10%;
}
</style>
</head>
<body>
<div style="width:960px;background-color:Red;margin:0 auto">
<div class="tenPercent">1</div>
<div class="tenPercent">2</div>
<div class="tenPercent">3</div>
<div class="tenPercent">4</div>
<div class="tenPercent">5</div>
<div class="tenPercent">6</div>
<div class="tenPercent">7</div>
<div class="tenPercent">8</div>
<div class="tenPercent">9</div>
<div class="tenPercent">10</div>
</div>
</body>
</html>
You have 2 problems in your CSS:
The space between the divs is because the inline-blocks are separated by a white space. You can remove the space with font-size: 0;.
The 2nd problem is the width of the elements, which is effected by
the border. box-sizing: border-box; will fix that.
.container {
width: 960px;
background-color: Red;
margin: 0 auto;
font-size: 0; /** this removes the space between the divs **/
}
.tenPercent {
box-sizing: border-box; /** this adds the borders into the width **/
color: Black;
display: inline-block;
border: 1px solid black;
width: 10%;
font-size: 14px;
}
<div class="container">
<div class="tenPercent">1</div>
<div class="tenPercent">2</div>
<div class="tenPercent">3</div>
<div class="tenPercent">4</div>
<div class="tenPercent">5</div>
<div class="tenPercent">6</div>
<div class="tenPercent">7</div>
<div class="tenPercent">8</div>
<div class="tenPercent">9</div>
<div class="tenPercent">10</div>
</div>
You should use float: left instead of display: inline-block.
In addition, the border is excluded in the width calculation, so actually your elements are 10% + 2 pixels (1px on the left and 1px on the right). You should add a box-sizing property:
.tenPercent {
color: #000;
float: left;
border: 1px solid black;
width: 10%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Since you're now using float for the child elements, you'll also need to add a clearfix to the container. It's probably best to add a class to the container (something semantic like container), and then use the following CSS:
.container {
width: 960px;
background: red;
margin: 0 auto;
}
.container:after {
display: table;
content: '';
clear: both;
}
jsFiddle Demo
You have other options than float and display:inline-block;
flexbox can do that very easily...no clearfixing, no whitespace...simple.
Support: IE10+ per CanIUse.com
* {
box-sizing: border-box;
margin: 0;
}
.parent {
background-color: plum;
text-align: center;
margin: 0 auto;
display: flex;
}
.tenPercent {
flex: 0 0 10%;
/* restricted to 10% width */
border: 1px solid grey;
}
<div class="parent">
<div class="tenPercent">1</div>
<div class="tenPercent">2</div>
<div class="tenPercent">3</div>
<div class="tenPercent">4</div>
<div class="tenPercent">5</div>
<div class="tenPercent">6</div>
<div class="tenPercent">7</div>
<div class="tenPercent">8</div>
<div class="tenPercent">9</div>
<div class="tenPercent">10</div>
</div>
Your css for should look like this:
.tenPercent {
color:Black;
float:left;
box-sizing: border-box;
display:inline-block;
border:1px solid black;
width:10%;
}
Notice the additions of float: left and box-sizing. float: left will get rid of the spacing, while box-sizing: border-box; will take care of the pixels added from the borders.
Here's a fiddle to play with: http://jsfiddle.net/0ztoe6tk/
Add the float:left; to the .tenPercent class.
It's from display: inline-block. If you float your columns to the left they will work as expected.
When you use display: inline-block spaces/returns etc between the elements that have inline-block applied to them will be taken into account and rendered. You can think of it as adding a single space between each inline-block element.
This is the main downside of using display: inline-block over floats in my humble opinion.
It is because display:inline-block takes into account white-space in the html. If you remove the white-space between the div's it works as expected. from here
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.Row {
}
.Row__item {
color: #000;
display: inline-block;
border: 1px solid black;
width: 10%;
margin: 0;
}
<div class="Row"><div class="Row__item">1</div><div class="Row__item">2</div><div class="Row__item">3</div><div class="Row__item">4</div><div class="Row__item">5</div><div class="Row__item">6</div><div class="Row__item">7</div><div class="Row__item">8</div><div class="Row__item">9</div><div class="Row__item">10</div></div>
Related
Why is input element does not take up 100% of the width of its container automatically after changing its display to block? Are there some other factors which also have an influence on that? Thanks. Demo see below:
some explanation: 1. I comment out width:100% intentionally because block level element is supposed to take up 100% of its container width.
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity:0.5;
/*width:100%;*/
}
<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>
I'm not an expert, but I'm pretty sure it's because you have commented out width:100%. try decommenting that then it should work
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity:0.5;
width:100%;
}
Changed the code check now
#container {
width: 300px;margin: auto;
background-color: red;
}
input[type="text"] {
opacity:0.5;
width:100%;
border-width:0;
padding:0;
}
<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>
The input element by default has a border: 2px and a padding: 1px 0 in google chrome
When you were actually applying a width of 100%, the input actually had a width greater than the actual div outside covering it
width of input(set to width of div) + border + padding > width of div
There is a tiny little white area on the right, in case you uncomment width:100% in your code. That white area actually is the input. If you set the border to zero that's really enough to fix things
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity: 0.5;
width: 100%;
border: 0
}
<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>
Default size of input is 20, so if you do not define size or css rule for your input automatically its size is 20.
The best solution is adding width.
try this code:
#container
{
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"]
{
display: block;
opacity:0.5;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
If you want to be responsive it is better to add box-sizing to all element like this:
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
My problem is that I am trying to use padding in my CSS so that the two divs inside my div are responsive at 50% each. But together they obviously are bigger than 100%. I know this is probably the paddings fault, but I don't know how to fix it.
CSS:
.columns {
max-width:100%;
width:100%;
display:inline-block;
text-align:left;
}
.col1 {
width:50%;
float:left;
padding-left:100px;
}
.col2 {
width:50%;
float:right;
padding-right:100px;
}
HTML:
<div class="columns">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
By default the box model will use padding and border to expand an element beyond a specified width. To keep the paddings/borders from pushing outward, and contain them inward, use box-sizing: border-box;
.columns {
max-width: 100%;
width: 100%;
display: inline-block;
text-align: left;
}
.col1 {
width: 50%;
float: left;
padding-left: 100px;
}
.col2 {
width: 50%;
float: right;
padding-right: 100px;
}
.col1,
.col2 {
box-sizing: border-box;
}
<div class="columns">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
In situations like these, it's useful to put this rule at the beginning of your styles:
* {
box-sizing: border-box;
}
It sets everything to box-sizing: border-box;, which means that the borders and paddings are included in the width/height settings, i.e. a container with width: 200px, border: 1px and padding 10px will really be 200px wide, including borders and padding (and not 222px, as it would be without box-sizing: border-box).
I have two divs next to each/side by side..
The LEFT div has a FLUID width.
The RIGHT div has a static wdth.
When I resize the screen/browser... it work great! (and as intended).
However because of the way it was set up:
(Fiddle example: http://jsfiddle.net/VHcPT/384/)
The RIGHT div in physically first in the mark-up..(and floated RIGHT).
However at say 768px breakpoint.. I need this RIGHT (static) DIV to stack UNDER the LEFT div.. how can I achieve this?
If I physically have the RIGHT div AFTER the LEFT div in the markup.. it would stack as expected.. but I need to have it FIRST so the fluid/static behavior in place works as it should.
So to re-cap, its NOT about getting the two divs next to each other one fluid, one static.. its how to handle that at a responsive/breakpoint.. and get the static (RIGHT) div to stack UNDER the fluid (LEFT) div
Using the fiddle example.. the RED DIV would go UNDER (stack) the GREEN lines/div.. (the green would then be full width).. at a certain breakpoint.
and because code is required now:
HTML:
<div id="contentcontainer">
<div class="rightcontainer">mm</div>
<div class="leftcontainer">
<div class="item_1">
some text
</div>
<div class="item_2">
some text
</div>
</div>
</div>
CSS:
#directorycontainer {
padding:10px 10px;
display:table;
box-sizing: border-box;
width: 100%;
font-size: 0.8em;
font-weight: normal;
}
.directory {
background: green;
margin-right: 10px;
overflow: hidden;
padding-right: 10px;
position: relative;
}
.mapcontainer {
background: red;
display:table;
width:240px;
height:480px;
float:right;
position:relative;
overflow: hidden;
}
.providercontainer{
background-color: #f7f9fb;
border: 1px solid #e1dacd;
display: table;
margin-bottom: 0.625em;
padding: 0;
width: 100%;
}
OK well looks like this works and should be an acceptable answer/solution:
Fiddle:
http://jsfiddle.net/VHcPT/389/
HTML/Markup:
<div id="contentcontainer">
<div class="leftcontainer">
<div class="item_1">
some text
</div>
<div class="item_1">
some text
</div>
</div>
<div class="rightcontainer">mm</div>
</div>
CSS:
* {box-sizing: border-box;}
#contentcontainer {
padding:10px 10px;
display:table;
box-sizing: border-box;
width: 100%;
font-size: 0.8em;
font-weight: normal;
}
.leftcontainer {
background: green;
overflow: hidden;
padding: 5px;
float:left;
width:calc(100% - 240px);
}
.rightcontainer {
background: red;
display:table;
width:240px;
height:480px;
float:left;
position:relative;
overflow: hidden;
}
.item_1{
background-color: #f7f9fb;
border: 1px solid #e1dacd;
display: table;
margin-bottom: 0.625em;
padding: 0;
width: 100%;
}
works with whatever breakpoints you set and the elements will stack correctly.
you may like my FLEXBOX alternative to you problem. It may take a bit of practice, but it will eventually give you much more control.
The FIDDLE
Below the basic CSS structure, no other 'display', 'position' or 'overflow' needed. With this structure you can mix-match any number of fixed and/or fluid columns.
.flex--box { display: flex; flex-flow: row wrap }
.flex--fluid { flex: 1 1 auto }
.flex--fixed { flex: 0 0 auto; min-width: 240px }
/* MOBILE MQ */
#media all and (max-width: 360px) {
.flex--fluid, .flex--fixed {
flex: 1 1 auto;
}
}
Let me know if you have problem with it.
And of course, do give credit if you think it is worth it.
( BTW: I changed the colors to something less retina intensive &D )
I have a layout that works fine in Firefox and Chrome but not in IE or Opera, so I'm looking for a better solution or a way to modify my present solution without using any JavaScript. The problem is that I can't get the innermost divs to get maximal height within the divs containing them, i.e. #l within #left and #r within #right.
<div id="wrap">
<div id="header">
</div>
<div id="content">
<div id="left">
<div id="l">
L
</div>
</div>
<div id="right">
<div id="r">
R
</div>
</div>
</div>
</div>
Here's the CSS I've come up with so far:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body, div {
margin: 0;
padding: 0;
}
body {
overflow-y: scroll;
}
html, body {
height: 100%;
}
#wrap {
background-color: #dddddd;
width: 100%;
height: 100%;
display: table;
border-spacing: 1em;
}
#header {
height: 2em;
display: table-row;
}
#content {
background-color: #f49837;
width: 90%;
display: table-row;
padding: 1em;
}
#left {
width: 30%;
background-color: #490274;
display: table-cell;
padding: 1em;
}
#right {
width: 70%;
background-color: #490274;
display: table-cell;
padding: 1em;
}
#l, #r {
width: 100%;
height: 100%;
background-color: #e1098f;
border-spacing: 0.5em;
display: table;
}
And here's a jsfiddle that shows what it should look like (if you look at it in Firefox or Chrome). The pink fields should cover the entire height of the purple ones except for padding.
http://jsfiddle.net/SsyAr/1/
Edit: Even if I should solve the IE/Opera problem I realize that I need something else as well, since there is no colspan feature available for CSS tables, and I'd need that for the header if I want it to have a width of 100%. The standard solution seems to be using display: table-caption + display: table-row-group. But however I try I can't make the caption part of the total height of 100% of the viewport. The table-row-group will be 100% high and the caption is added upon that.
I have a problem with my pixel calculations not adding up.
I have a main div (#page) that is: 980px wide
It has a child div (#content) that is also: 980px wide
Inside the div (#content) there are two divs (#left-pane), which is 300px wide and (#right-pane), which is 676 px wide.
Both of them have a 1px border all the way around - looking across the site horizontally this should give 4px in width.
Therefore,
300px + 676px + 4px = 980px
Despite this, my div (#right-pane) moves down below the div (#left-pane). Why?
I have padding and margin set to NONE on both of them.
HTML:
<head>
<title>Brazil Learner | The easy was to master Brazilian-Portuguese</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div id="top">
<img class="logo" src="images/logo.png" />
<ul class="social">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="nav">
<div class="nav-button">Home</div>
<div class="nav-button">Lessons</div>
<div class="nav-button">Guides</div>
<div class="nav-button">About us</div>
</div>
<div id="content">
<div id="left-pane">
</div>
<div id="right-pane">
</div>
</div>
<div id="footer">
<div>
</div> <!-- Page closer -->
</body>
</html>
CSS:
html,body,p,ul,li,img,h1,h2,h3 {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
text-decoration: none;
color: black;
}
#page {
width: 980px;
margin: 0px auto;
}
/* Top */
#top {
border: 1px solid black;
overflow: hidden;
padding: 30px 30px;
}
.logo {
float: left;
width: 130px;
height: 130px;
}
.social {
float: right;
margin-right: 40px;
}
.social li {
display: inline;
margin: 0px 10px 0px 0px;
}
/* Nav */
#nav {
border: 1px solid red;
overflow: hidden;
margin-bottom: 20px;
}
.nav-button {
float: left;
width: 100px;
margin-right: 6px;
background-color: grey;
text-align: center;
}
/* Content */
#content {
margin-bottom: 20px;
overflow: hidden;
width: 980px;
}
#left-pane {
float: left;
width: 300px;
height: 700px;
border: 1px solid green;
}
#right-pane {
float: right;
width: 676px;
height: 700px;
border: 1px solid black;
}
/* Footer */
#footer {
float: left;
width: 980px;
height: 70px;
border: 1px solid blue;
}
I'm not sure if this will work or not, but add this and see if it works.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
What browser are you using to test your site?
I tossed up your code on a fiddle, and it appears just fine in my Firefox, which suggests that you're probably looking at it in IE, and possibly either in a non-standards mode, or an old version.
If that's the case, then it's due to how IE (namely, old versions), handle the box model and math. To IE, 300px + 676px + 4px > 980px . The easiest way to fix this is to reduce something that affects the width by 1-2px, and it will probably fix it.
To consider a width of a div, there are 4 comoponents you should think about
The width of the div itself (this is where your text will be for example)
The padding width (surrounding the width mentioned in point 1 above)
The width of your border (surrounding the padding)
The margin (surrounding the border)
So, if you search for CSS Box Model (some examples are here http://www.w3.org/TR/CSS2/box.html and here http://www.w3schools.com/css/css_boxmodel.asp), you will be able to see the box model that will help you with that. Also using jQuery you can retrieve the width of each section using the following methods: .width(), .innerWidth(), and .outerWidth(). Note you may need to do some calculations to finds border width, padding width, or margin width.
Read CSS documentation and jQuery documentation to have a clearer idea of how those work. Sometimes you may need to utilize jQuery to make the width calculations for you properly if you need some exact values with variable width objects.