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).
Related
I tried to create CSS grid like bootstrap col.
I want to add a padding of 15px from the left and the right. But when I add the attribute it breaks the float (makes it to not stand side by side).
Here is the example:
https://jsfiddle.net/t29q1gcL/
Why didn't it work?
.grid-4{
float: left;
width: 40%;
background: red;
padding: 0 15px;
}
.grid-6{
float: left;
width: 60%;
background: blue;
padding: 0 15px;
}
add this to your css, reference link http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
* {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
}
check with the working fiddle https://jsfiddle.net/d8mrdz7x/
Add: "box-sizing: border-box;"
.grid-4{
float: left;
width: 40%;
background: red;
padding: 0 15px;
box-sizing:border-box;
}
.grid-6{
float: left;
width: 60%;
background: blue;
padding: 0 15px;
box-sizing:border-box;
}
.clearfix{
clear: both;
}
This is because you set width for content area, and content area is inside the padding, border and margin. So when you specify padding, total width would be 60% + 15px.
You can get around it by using nested cell:
/* remove padding from grid-X classes */
.cell {
padding: 0 15px;
}
<div class="grid-6">
<div class="cell">
<p>content for grid6</p>
</div>
</div>
(I've forked your jsfiddle here: https://jsfiddle.net/9ss09b15/)
You can also add box-sizing:border-box; to your grid-X classes, which will make it include padding and border in width, but it still won't include margin.
If padding is a constant, you can use calc() function to assign a calcutated width. Check below example.
.grid-4 {
float: left;
width: calc(40% - 30px);
/* 30px = 15px(padding-right) + 15px(padding-left) */
background: red;
padding: 0 15px;
}
.grid-6 {
float: left;
width: calc(60% - 30px);
background: blue;
padding: 0 15px;
}
.clearfix {
clear: both;
}
<div class="grid-4">
<p>content for grid4</p>
</div>
<div class="grid-6">
<p>content for grid6</p>
</div>
<div class="clearfix"></div>
Updated fiddle: https://jsfiddle.net/t29q1gcL/11/
Use box-sizing:border-box; style. Because The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
In width calculation formula is width = margin-left -padding-left + width + margin-right -padding-right + border
In your css style total width morethan 100% You have use 60% , 40% and padding 30px. so, it's break.
Use CSS3 box-sizing Property
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Should they include the border-box? Or just the content-box (which is the default value of the width and height properties)?
Instead of calculating width by including padding and border, the box-sizing property in combination with the border-box value uses the width property as the actual rendered width.
Example:
.sidebar {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #DDD;
}
Any padding or border that’s applied will not be added to the rendered width. Instead, it will automatically subtract from the space that’s available in the content area. This results in code that is far more readable. Here’s an image that helps illustrate how box-sizing: border-box calculates widths.
Reference
https://css-tricks.com/box-sizing/
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
http://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts
.grid-4{
float: left;
width: 40%;
background: red;
padding: 0 15px;
box-sizing: border-box;
}
.grid-6{
float: left;
width: 60%;
background: blue;
padding: 0 15px;
box-sizing: border-box;
}
.clearfix{
clear: both;
}
<div class="grid-4">
<p>content for grid4</p>
</div>
<div class="grid-6">
<p>content for grid6</p>
</div>
<div class="clearfix"></div>
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 )
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>
The div elements inside the row are floated left, as described here:
http://www.w3schools.com/html/html_responsive.asp
and percentage sized.
I tried to apply what was suggested in this link below, in a similar question, but without success:
Responsive CSS / Inline divs
The divs keep an inline relation of 50% - 100% - 50% and their contents overlap.
Can anyone help me spot what I missed?
Thank you.
In my CSS and HTML I have:
footer[role="contentinfo"] div {
box-sizing: border-box;
}
.engage-row:after {
content: "";
display: table;
clear: both;
}
.col-1 {
float: left;
width: 25%;
}
.col-2 {
float: left;
width: 50%;
padding: 10px 20px 0px 20px;
}
.col-3 {
float: left;
width: 25%;
}
.footer-wfix {
clear: both;
}
/* for illustrative purposes */
.engage-row {
border: 1px solid red;
}
.engage-row > div {
border: 1px solid blue;
}
<footer id="colophon" role="contentinfo">
<div class="footer-wrap">
<div class="engage-row">
<div class="col-1">
Column 1
</div>
<div class="col-2">
Column 2
</div>
<div class="col-3">
Column 3
</div>
</div>
<div class="footer-wfix">
Footer Menu and Site-generator
</div>
</div>
</footer><!-- #colophon -->
Edited the code and am adding the below for clarity:
- I edited the footer by adding the "engage-row" and it's containing column divs.
- All divs have inherited box-sizing: border-box.
- Column 1, Column 2 and Column 3 don't readjust positioning when I decrease the screen size (width); instead of becoming on top of each others, they are changing their size (keeping percentages but becoming smaller), making the containing text and images overlap (text from column 2 goes in front of the image in column 1). I hope I am using the correct terms for clarity.
- How can I make them readjust the positioning as the screen size changes?
- PrintScreen: 3column divs in footer
(This is an awesome site. Thank you)
You need to take into account the padding in the .col-2 declaration. When you have three columns adding up to a total of "100 % width" and then add padding, the result so to speak is "more than 100 % width", causing the overlapping behavior you observe.
One way around it is to declare the paddings in percent as well. If you don't like the resulting "elastic margins", you need to figure out a equation that works. Or check out Bootstrap or something similar (I mean you can either use it as is, or decipher their responsive solutions).
You need to add the css3 property box-sizing: border-box; This will wrap your padding into your div, so the width will be 50% only.
Please share your feedback if its helpful for your problem.
.col-2{
float: left;
width: 50%;
padding:10px 20px 0px 20px;box-sizing: border-box;
}
you mention 25% 50% 25% and a border of div so overlapped,
in this case use box-sizing: border-box;
.engage-row:after {
content: "";
display: table;
clear: both;
}
.col-1 {
float: left;
width: 25%;
}
.col-2 {
float: left;
width: 50%;
padding: 10px 20px 0px 20px;
}
.col-3 {
float: left;
width: 25%;
}
.footer-wfix {
clear: both;
}
/* for illustrative purposes */
.engage-row {
border: 1px solid red;
}
.engage-row > div {
border: 1px solid blue;
box-sizing: border-box;/*added one*/
}
This is what I needed (I couldn't be clear until I researched enough):
The left and right divs include images and I didn't want those to change size as I decrease the screen resolution. I wanted to input that adjustment in the middle div which contains only text and a subscription form.
The question/answer that drove me there:
How to make element fill remaining width, when sibling has variable width?
My testing fiddle - http://jsfiddle.net/0gvxxpjj/
<!-- In html--->
<div class="row">
<div class="col-1">
<img src="">
</div>
<div class="col-3">
<img src="">
</div>
<div class="col-2">
<h3>Header</h3>
<p>This is a paragraph that, along with the header, needs to wrap as the screen is resized</p>
</div>
</div>
<!-- html ends here-->
/* CSS starts here */
.col-1 {
float: left;
width: 100px;
}
.col-3 {
float: right;
width: 100px;
}
.col-2{
padding: 10px 20px 0px 20px;
overflow: hidden;
}
.row {
border: 1px solid black;
display: inline-block;
}
.col-1, .col-3 {
border: 1px solid blue;
}
.col-2 {
border: 1px dashed red;
}
Hope it becomes useful to someone else.
As I understand it, you want to have the divs be in a 25% - 50% - 25% layout and after the browser shrinks beyond a certain size, they become 100% width and stack on top of each other.
This is done via media queries. What, essentially, happens is that you set some CSS rules inside a media query which adds to any previous CSS rules only when a certain condition has been met (in this case browser width). A rough example can be seen below.
These are the relevant parts:
This sets how the divs will look by default - full width.
.col-1,
.col-2,
.col-3 {
float: left;
width: 100%;
}
This sets the widths of the divs to 25-50-25 once the browser width is larger than 768px.
#media all and (min-width:768px) {
.col-1, .col-3 {
width: 25%;
}
.col-2 {
width: 50%;
}
}
You can extend this example to the layout you desire.
footer[role="contentinfo"] div {
box-sizing: border-box;
}
.engage-row:after {
content: "";
display: table;
clear: both;
}
.col-1,
.col-2,
.col-3 {
float: left;
width: 100%;
}
.col-2 {
padding: 10px 20px 0px 20px;
}
.footer-wfix {
clear: both;
}
/* for illustrative purposes */
.engage-row {
border: 1px solid red;
}
.engage-row > div {
border: 1px solid blue;
}
#media all and (min-width:768px) {
.col-1, .col-3 {
width: 25%;
}
.col-2 {
width: 50%;
}
}
<footer id="colophon" role="contentinfo">
<div class="footer-wrap">
<div class="engage-row">
<div class="col-1">
Column 1
</div>
<div class="col-2">
Column 2
</div>
<div class="col-3">
Column 3
</div>
</div>
<div class="footer-wfix">
Footer Menu and Site-generator
</div>
</div>
</footer><!-- #colophon -->
I have 2 divs, and I need both of them to have a minimum size of about 300px.
I need the left div to stretch out to the available space, however if the window size is too small, then the right div needs to drop below. This is what I have currently, but Im not sure what to change.
<style>
.bbleft {
min-height: 237px;
overflow:hidden;
}
.bbright {
float: right;
width: 300px;
min-height: 237px;
margin-left: 10px;
}
</style>
This is what you need
http://jsfiddle.net/fxWg7/790/
HTML
<div class="container">
<div class="left">
content fixed width
</div>
<div class="right">
content flexible width
</div>
</div>
CSS
.container {
height: auto;
overflow: hidden;
}
.left {
width: 300px;
float: left;
background: #aafed6;
}
.right {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
min-width:300px;
width: auto;
max-width:500px; /* not neccessary */
overflow: hidden;
}
fiddle
A css3 approach..
Flexible left div.
Right div drops when page too small.
Left div fills up the rest of the space.
HTML
<div class="left"></div>
<div class="right"></div>
CSS
body{
width:100%;
}
body div{
min-width:300px;
float:left;
}
.left{
width: calc( 100% - 310px );
}
simple use this
.bbleft {
min-height: 237px;
overflow:hidden;
float:left;width:100%;
}