I am having an issue that when i float two div(s) (one left, one right) i have this strange padding that i cannot find in my code in the following link you will see my issue. The div on the right (sidebar) has some kind of padding to the right and i cannot figure out how to remove it.
So my question is: How do i remove the above mentioned padding?
Attached bellow is my HTML code followed by CSS.
#wrapper {
width: 80%;
height: 980px;
margin: auto;
padding: 0px;
}
.header {
width: 100%;
border-style: solid;
margin: auto;
text-align: center;
}
.navbar {
width: 100%;
height: 4%;
border-style: solid;
}
.body {
width: 75%;
height: 80%;
border-style: solid;
float: left;
margin: 0px;
padding: 0px;
}
.sidebar {
width: 25%;
height: 80%;
border-style: solid;
margin: 0px;
float: right;
padding: 0px;
}
<body>
<div id="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
</div>
<div class="sidebar">
<h1>sidebar</h1>
</div>
<div class="body">
<h1>body</h1>
</div>
<div class="footer">
</div>
</div>
</body>
The borders do not contribute to the width by default on standards compliant browsers.
Either fix this by adjusting the width to account for the borders, or change the box sizing model;
https://developer.mozilla.org/en/docs/Web/CSS/box-sizing?v=control
border-box
The width and height properties include the content, the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.
Adding box-sizing: border-box; is a fix, that will make the borders count towards the width.
Doing width: calc(75% - 2px) can let you specify what the width should be in a way that is easy to read.
With border-box
#wrapper {
width: 80%;
height: 980px;
margin: auto;
padding: 0px;
}
#wrapper > div {/*direct div descendents of wrapper only*/
box-sizing:border-box;
}
.header {
width: 100%;
border-style: solid;
margin: auto;
text-align: center;
}
.navbar {
width: 100%;
height: 4%;
border-style: solid;
}
.body {
width: 75%;
height: 80%;
border-style: solid;
float: left;
margin: 0px;
padding: 0px;
}
.sidebar {
width: 25%;
height: 80%;
border-style: solid;
margin: 0px;
float: right;
padding: 0px;
}
<body>
<div id="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
</div>
<div class="sidebar">
<h1>sidebar</h1>
</div>
<div class="body">
<h1>body</h1>
</div>
<div class="footer">
</div>
</div>
</body>
With Width
Edit: I wasn't able to successfully create a snippet for width, some more tweaking may be required with the height, clearing the footer, or floating both the body and sidebar in the same direction? or adding content.
A warning about using calc() for the width:
the default border sizes are not standard across browsers. in order to properly specify a width, you will need to declare the size of the border using a cross browser compatible method.
The default box model adds the width of borders (and padding) to the width you've specified for an element, so .body and .sidebar are actually each slightly wider than 25% and 75%, hence they don't fit into one row.
To change the box model so that the width of borders is included in the widths you specify, use box-sizing: border-box.
E.g.
* {box-sizing: border-box;} /* Make all elements use 'border-box' */
Here's your updated JSFiddle
Here's info about CSS Box Sizing
box-sizing: border-box : The width and height properties (and min/max properties) includes content, padding and border, but not the margin.so when you use of padding or border no affect on width that you defined.
For Fix:
Just add #wrapper * {box-sizing: border-box;}
#wrapper {
width: 80%;
height: 980px;
margin: auto;
padding: 0px;
}
#wrapper * {
box-sizing: border-box;
}
.header {
width: 100%;
border-style: solid;
margin: auto;
text-align: center;
}
.navbar {
width: 100%;
height: 4%;
border-style: solid;
}
.body {
width: 75%;
height: 80%;
border-style: solid;
float: left;
margin: 0px;
padding: 0px;
}
.sidebar {
width: 25%;
height: 80%;
border-style: solid;
border-width: 3px;
margin: 0px;
float: right;
padding: 0px;
}
<div id="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
</div>
<div class="sidebar">
<h1>sidebar</h1>
</div>
<div class="body">
<h1>body</h1>
</div>
<div class="footer">
</div>
</div>
It's not padding, its width of the borders I guess. If you remove the borders it will work
.body {
width: 75%;
height: 80%;
border: none;
float: left;
margin: 0px;
padding: 0px;
background-color: green;
}
.sidebar {
width: 25%;
height: 80%;
border: none;
margin: 0px;
float: right;
padding: 0px;
background-color: red;
}
In my experience, using CSS floats makes my HTML and CSS prone to weird overflow/misalignment issues like this. Notice how if I declare the property-value pair overflow: hidden; on #wrapper they seem to align. That said, the right-hand side border of each still gets truncated. Im able to fix this by including [box-sizing][1]: border-box; on the direct descendants of the #wrapper child (i.e., using the #wrapper > * selector). This property simply ensures that the border-width is included along with the usual content and padding when specifying widths and/or heights.
#wrapper {
width: 80%;
height: 980px;
margin: auto;
padding: 0;
overflow: hidden;
}
#wrapper > * { box-sizing: border-box; }
.header {
width: 100%;
border-style: solid;
margin: auto;
text-align: center;
}
.navbar {
width: 100%;
height: 4%;
border-style: solid;
}
.body {
width: 75%;
height: 80%;
border-style: solid;
float: left;
margin: 0;
padding: 0;
}
.sidebar {
width: 25%;
height: 80%;
border-style: solid;
margin: 0;
float: right;
padding: 0;
}
<body>
<div id="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
</div>
<div class="sidebar">
<h1>sidebar</h1>
</div>
<div class="body">
<h1>body</h1>
</div>
<div class="footer">
</div>
</div>
</body>
Related
Code:
HTML
<body>
<div class="wrap">
<div class="box">???</div>
</div>
</body>
CSS
.wrap {
background-color: #0000FF;
display: block;
height: 600px;
margin: 0px auto;
padding: 0px;
width: 600px;
}
.box {
border: solid 20px #FF0000;
color: #FFFFFF;
display: block;
height: 100%;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
JSFiddle: http://jsfiddle.net/5k0ddtdn/4/
I'm expecting the red border to wrap completely around the blue parent div considering this isn't a border-box.
Why doesn't it do that?
Add box-sizing: border-box; to .box.
.box {box-sizing: border-box;}
http://jsfiddle.net/5k0ddtdn/8/
In your code, the inner element has width 600px + 40px border, the parent element (.wrap has 640px in total). You need to change box-model, or set correct size to inner element (width: 560px; height: 560px;). You can remove width for inner element and set just height: 560px;.
http://jsfiddle.net/5k0ddtdn/10/
update your box like so :
.box {
border: solid 20px #FF0000;
color: #FFFFFF;
display: block;
height: 100%;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
box-sizing: border-box;
}
Live Demo
I'm having trouble trying to get a desired page layout to work by using HTML5/CSS3 only (without needing JavaScript).
The basic concepts are...
A page with a header and body (static).
The body has several "sections" which each have a header and body (static).
The sections flow from left-to-right (you scroll the page body horizontally to see the sections if they overflow).
The sections have a fluid height and width (height adjusts to the size of the page body, width adjusts based on the contents or a min of 300px).
The fields within the section body flow from top-to-bottom. When there is overflow, the fields overflowing should move to a new column and the section body should expand dynamically. The should not be broken apart if they overflow to a new column (the label and input should be moved together).
NOTE: I'm testing in IE11 currently but ultimately the solution should be functional in the latest Chrome/FF/IE/Safari versions.
I can't seem to get the section body to expand when the fields overflow into new columns while still retaining the column behavior.
HTML:
<div class="container">
<div class="header">Header</div>
<div class="body">
<div class="section">
<div class="sectionheader">Section 1</div>
<div class="sectionbody">
<div class="field">
<label>Field 1</label>
<input type="text" />
</div>
<!-- NOTE: repeat field element to create 5 or more fields... -->
</div>
</div>
<!-- NOTE: repeat section element to create more sections... -->
</div>
</div>
CSS:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
html, body, .container {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-color: gray;
overflow: hidden;
}
.header {
height: 150px;
background-color: red;
}
.body {
position: absolute;
top: 150px;
bottom: 0;
left: 0;
right: 0;
white-space: nowrap;
vertical-align: top;
padding: 40px;
overflow-x: auto;
overflow-y: hidden;
}
.section {
min-height: 200px;
height: 100%;
border: 2px solid red;
margin-right: 40px;
display: inline-block;
min-width: 300px;
position: relative;
vertical-align: top;
}
.sectionheader {
height: 40px;
color: white;
font-size: 20pt;
padding-left: 5px;
}
.sectionbody {
white-space: normal;
border: 2px solid blue;
padding-top: 10px;
color: white;
height: calc(100% - 40px);
column-count: auto;
-webkit-column-count: auto;
column-width: 320px;
-webkit-column-width: 320px;
column-fill: auto;
-webkit-column-fill: auto;
}
.field {
margin: 0 10px 10px 10px;
width: 300px;
display: inline-block;
}
.field label {
font-size: 12px;
line-height: 20px;
display: block;
}
.field input {
width: 100%;
font-size: 16px;
line-height: 20px;
height: 40px;
padding-left: 5px;
}
Here is the fiddle: http://jsfiddle.net/t7kQ4/7/
(drag the handle to adjust the height of the result pane to trigger the field overflow)
Does this help: http://jsfiddle.net/t7kQ4/10/
You need to remove the calc you are performing and allow it to be auto.
section {
height:auto;
}
.sectionbody {
height:auto;
}
I have hardly written any HTML/CSS and am already encountering a problem. My header element is not automatically expanding it's height to wrap it's children. I've done a bunch of research and fooled around in the Developer Tools, but can't seem to put my finger on it. I'm sure it's really simple, but what is it I'm overlooking here?
<!DOCYTPE html>
<head>
<title>Page Title</title>
<style>
header {
width: 96%;
height: auto;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
section {
width: 96%;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
footer {
width: 96%;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
h1 {
font-size: 2em;
margin: 1em auto;
}
img {
max-width: 100%;
/* This tells the browser to set the image to the full-width of it's containing element. */
}
.group-icon {
width: 10%;
position: relative;
float: left;
margin: 0 1% 0 0;
}
.group-name {
position: relative;
float: left;
}
</style>
</head>
<body>
<header>
<div class="group-icon">
<img src="images/sailing-icon.png">
</div>
<div class="group-name">
<h1>Pirates in the Bay</h1>
</div>
</header>
<section>
<h2>TEST</h2>
</section>
<section>
<h2>TEST</h2>
</section>
<footer></footer>
</body>
</html>
It's because you've floated elements inside the header (group-name and group-icon).
Try adding overflow: hidden to the header styles. The will 'clear' the floated elements effectively.
See the demo here.
http://jsbin.com/EPelEMA/1/edit
Some more information about the overflow property here: http://css-tricks.com/the-css-overflow-property/
I have a three column layoyut - left, middle and right.
<div id="content-area" class="clearfix">
<div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>
<div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>
<div id="content-right">
<f:format.raw>{navigator}</f:format.raw>
<f:format.raw>{content_right}</f:format.raw>
</div>
</div>
with this CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-area {
padding: 10px 0;
margin: 5px auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
width: 600px;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
text-align: left;
}
Left is 180px, middle is 600px and right is 180px, making it a 960px layout, like this.
http://jsfiddle.net/kxuW6/
For the most part, this works as intendend, but I want the middle column to have a somewhat flexible width according to the content in the right column.
It I put a image in the right column that have a width of 360px, the middle column will be 420px wide.
My problem is that an image with a width more than 180px, fx. 360px, will break the floating of the columns, as per this fiddle
http://jsfiddle.net/5hNy5/
I want it to it to be like this fiddle, but without the fixed width in the middle column.
http://jsfiddle.net/Eqwat/
Use display: table-cell instead of floats...
If you are supporting the more mordern browsers, you can try:
#content-area {
width: 960px;
padding: 10px 0;
margin: 5px auto;
display: table;
border: 1px dashed blue;
}
#content-left {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
}
#content-middle {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-middle p {
margin-top: 10px;
}
#content-right {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
text-align: left;
}
The width value for a table-cell acts like a mininum value, so the left and right columns will expand if you insert an image into eithe one and the middle column will adjust to take up the remaining width.
See demo at: http://jsfiddle.net/audetwebdesign/V7YNF/
The shortest form that should solve the above:
HTML:
<div class="area">
<div class="side"></div>
<div>Some content here</div>
<div class="side"></div>
</div>
CSS:
<!-- language: CSS -->
.area {
width: 100%;
display: table;
}
.area > *{
display:table-cell;
}
.side {
width: 100px;
background-color:gray;
}
See this fiddle.
If you are fine with shuffling the source order of the columns, you can relegate #content-middle to the bottom and give it display: block and overflow: hidden.
Markup:
<div id='all-wrapper'>
<div id="content-area" class="clearfix">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-middle"></div>
</div>
</div>
CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
display: block;
overflow: hidden;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
}
Now the middle-column will take up the available space when the right-column's width changes.
Demo: http://dabblet.com/gist/7200659
Required reading: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
I have my HTML like this
<div id="wrapper">
<div id="main">
<p>test</p>
</div>
<div id="sidebar">
<p>test</p>
</div>
</div>
And CSS
#wrapper {
width: 960px;
margin: 0px auto;
}
#main {
width: 790px;
display: inline-block;
padding: 0px;
margin: 0px;
}
#sidebar {
width: 170px;
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
}
Example: http://jsfiddle.net/Hpwff/
The problem is that even though the sum of both divs is 960px, which is the same width as the parent container's (#wrapper), they do not float next to each other. I have to shrink either the sidebar or main containers width back by 4px so they fit. Why is this, and is there a way around it?
You have a newline between the two divs; since they are inline-block, the newline between them is rendered as a space. Without space it works as you expect.
Add float: left; to each div and it works like it should! updated jsFiddle
Updated code:
#wrapper {
width: 960px;
margin: 0px auto;
}
#main {
width: 790px;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
#sidebar {
width: 170px;
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
float: left;
}
Look this: jsfiddle. You need to add float: left to your main and sidebar blocks. And add clear block after them.
<div id="wrapper">
<div id="main">
<p>test</p>
</div><div id="sidebar">
<p>test</p>
</div>
</div>
No space between </div> and <div>
This is one of the older tricks - you need to set the font size of the wrapping container (#wrapper) to 0px and then each of the children to whatever the font size you require.
This trick works on almost all browsers. However, this time it is not IE, but rather Safari that is failing to acknowledge the setup.
So the code should look like this:
#wrapper {
width: 960px;
margin: 0px auto;
font-size:0px;
}
#main {
width: 790px;
display: inline-block;
padding: 0px;
margin: 0px;
font-size:16px;
}
#sidebar {
width: 170px;
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
font-size:16px;
}
You can test it on your already created jsfiddle, it works well.