I have a section set to a fixed width and a 100% width div inside of it with a 5 pixel border.
Looks fine but you can tell the containing div is a bit off center and it wouldn't be without the border, which I need to match the client comp.
The code is rather straightforward:
#info {
max-width: 980px;
margin: 0 auto;
}
.info-box {
border: 5px solid #0033A0;
display: inline-block;
text-align: center;
padding: 48px 0;
width: 100%;
}
<section id="info">
<div class="info-box">SOME CONTENT</div>
</section>
The only thing I can think of is to make the width of the .info-box to be 98% or something like that, but that's still not going to truly work. So will anything?
BTW, I already tried adding relative positioning, set display to inline instead of inline-block....none of which worked.
Add box-sizing: border-box; to your info-box class
.info-box {
background: rgba(248, 243, 232, 0.5) none repeat scroll 0 0;
border: 5px solid #0033a0;
box-sizing: border-box;
display: inline-block;
padding: 48px 0;
text-align: center;
width: 100%;
}
box-sizing is better explained here https://css-tricks.com/box-sizing/
Related
I'm struggling to horizontally center three <h2> elements
#container {
margin: 0 auto;
width: 100%;
height: 3em;
}
h2 {
display: inline-block;
text-align: center;
width: 33%;
margin-left: auto;
margin-right:auto;
border-radius: 5px;
font-family: Arial;
color: Black;
font-size: 18px;
background: #FDF3E7;
padding: 10px 20px 10px 20px;
border: solid #7E8F7C 3px;
}
<div id="container">
<h2 class="header">Restaunt Name:</h2
><h2 class="header">Phone #:</h2
><h2 class="header">Star Rating:</h2>
</div>
I tried removing the white space by reformatting the HTML. I also tried using this site. I can't get the third element to sit inside the container.
Update: I followed jcuenod's advice. This seems to have solved the block level question of horizontal centering, but looking at the styling, I am now wondering why the headers are matching with their results. Here is what they look like now.
Shouldn't the h2's occupy the entirety of the container, given that they are centered across a container with 100% width?
The Problem
The problem is that you have widths that fill the horizontal space (mostly; 33%). But then your <h2> elements take up extra horizontal space because you add padding and border.
The Solution
Use box-sizing as follows:
box-sizing: border-box;
Explanation
MDN explains the border-box setting for box-sizing:
The width and height properties include the content, the padding and border, but not the margin.
MDN lists it as experimental but it has very good browser support.
#container {
width: 100%;
height: 3em;
}
h2 {
box-sizing: border-box;
display: inline-block;
text-align: center;
width: 33%;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: Arial;
color: Black;
font-size: 18px;
background: #FDF3E7;
padding: 10px 20px 10px 20px;
border: solid #7E8F7C 3px;
}
<div id="container">
<h2 class="header">Restaunt Name:</h2
><h2 class="header">Phone #:</h2
><h2 class="header">Star Rating:</h2>
</div>
just use display: block for <h2>
Add text-align:center; to the #container element.
Because your h2 elements are set to inline-block they don't occupy the full width of their container. That's why the centering is not working.
I need help with making double vertical lines.
Here are styles:
.slide-container
{
text-align: center;
width: 25%;
}
.v-separator
{
content: "";
display: inline-block;
width: 0px;
height: 230px;
border-right: 1px solid #fafafa;
border-left: 1px solid #b4b4b4;
padding: 0;
position: relative;
top: 20px;
}
.v-separator has width 2px because of border and this causes the problem. I have tried to make .slide-container width a bit less than 25% (like 23.853%), but this is not the decision.
I have no idea how to implement this feature somehow else.
Btw I am using Foundation 5 and Compass.
fiddle which demonstrates the problem: http://jsfiddle.net/5w7Hr/
The width:25% generally doesn't include the margins and borders. When all these are added together the width exceeds 100%. This is the reason why the last box gets pushed down. You can fix this by adding box-sizing setting as shown below.
Note: Elements whose display is inline-block by default have a margin assigned and hence we have to offset that also by assigning a negative margin (Source: CSS Tricks). Alternately, using float: left instead of display: inline-block is also a good option.
#wrapper
{
width: 600px;
background: lime;
box-sizing: border-box;
}
.slide-container
{
text-align: center;
width: 25%;
display: inline-block;
margin: 0px -4px;
}
Demo
I think the two states shown in the image are self-explanatory. The red lines have the same height, the blue bars have the same dimensions.
How can I achieve this layout? My attempt so far (may be used for testing): http://jsfiddle.net/n6zYE/
The doctype is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> but could be changed to <!DOCTYPE html>.
The problem is, that I see no way to keep the red line the same height when the content gets bigger while still having no scrollbar when the content is small enough.
The restrictions are only, that I do not want to use anything that is supported by less than 90% of the users. For example box-sizing luckily is supported by ~93% of the users.
EDIT: I need a box-shadow on the black area, so overlays will not solve the problem. But besides this, Nulen made a working example (http://jsfiddle.net/n6zYE/2/) of how it shall behave.
You can do it dirty way with black divs as black margins with content like this:
#content {
min-height: 100%;
background: grey;
color: white;
width: 500px;
margin: 0 auto;
padding: 20px 0 70px 0;
box-sizing: border-box;
}
http://jsfiddle.net/n6zYE/2/
modify height of #inside div to test for different content.
EDIT: done with calc():
http://jsfiddle.net/n6zYE/9/
EDIT: done with overflow: auto;:
http://jsfiddle.net/n6zYE/10/
(note: this does not work entirely for my IE11) //nulen
I'm not 100% sure if this is what you require but give this a try
#foot { position:fixed;left:100px;}
#content {height:500px;overflow:hidden;
You will need to put position:relative around the containing div and also change the height accordingly on content div.
Typically you would wrap the actual content in a container that is set up to scroll. That way you can control the wrapper's height, and its content will scroll within it.
<div id="#bodyContent">
<div id="#wrapperThatScrolls" style="overflow-y:auto" >
<p>Content</p>
</div>
// Your red margin would appear here
</div>
Solution, using display: table, display: table-row and display: table-cell:
html { height: 100%; }
body {
background: green;
padding: 0;
margin: 0;
height: 100%;
}
#inside {
border: 2px solid white;
height: 200px;
}
#topcontentrow, #bottomcontentrow {
display: table-row;
height: 20px;
}
#contentrow {
display: table-row;
background: grey;
box-shadow: 0px 0px 20px 0px #000;
}
#content {
display: table-cell;
padding-bottom: 40px;
color: white;
}
#contenttable {
display: table;
height: 100%;
width: 500px;
margin: 0 auto;
}
#foot {
height: 40px;
position: relative;
margin: -60px auto 0;
background: blue;
width: 500px;
}
<div id="contenttable">
<div id="topcontentrow"></div>
<div id="contentrow">
<div id="content">
<div id="inside">
</div>
</div>
</div>
<div id="bottomcontentrow"></div>
</div>
<div id="foot">
</div>
Tested and working in FF 31.0 and IE 11
The display: table is supported widely.
I have an error with my HTML/CSS that I would like to solve.
I have multiple links setup as divs. Their width is 10%. As so, all 10 Divs fit inside the parent div. I would like the links (10 divs) to have a border to distinguish them apart. If I try to add a border at all, the last div jumps out of the parent div. Is there a way to fix this? I tried using overflow:auto, didn't work. Mostly what Im looking to find is a way to make a border that goes inside the div, if that's possible that is.
body {
background-color: #574B59;
}
.header {
height: 87px;
width: auto;
border: 4px solid black;
margin: 20px;
background-color: white;
text-align:center;
font-size: 20px;
}
.links {
height: 25px;
width: auto;
border: 3px solid black;
margin: auto;
}
.body{
}
.subheader{
}
.linkss {
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
Look at .Linkss
Either reduce the width of each div by the border-width (multiplied by 2) or you can apply a fake border by using the box-shadow property with a blur of 1px.
box-shadow: 0px 0px 1px #000000;
The reason is 10% plus even a 1px border is larger than 10% thus, too large for 10 to fit. An easy solution it to make a border on something inside the div, and make that fill the whole parent. But please post some code so we may provide a more better solution.
Add this to the CSS for the divs:
.linkss {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
Or you can set the width to calc(10% - 2px).
.linkss {
-moz-box-sizing: border-box;
box-sizing: border-box;
/* plus all your other properties here*/
}
One solution is to set a negative margin of 1 pixel on your linkss see example below
.linkss {
margin: 0 -1px 0 -1px;
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
I have done this before but sometimes depending you on your layout or design this may need a little tweaking, let me know if this helped. Happy fridays!
One fix for layout issues like this is to apply the border to an element within the div, in your case, the <a> element.
.column_div{width:10%; float:left;}
.column_div a{display:block; border:2px solid #f00;}
Tested in FireFox.
The other solution would be to reduce your 10% width and apply the border as a percentage width; but trying to get it the same on the top & bottom would then become a headache.
I'm creating two columns that I want to fill the page. Very simple. However, I'm getting a very slight vertical scrollbar. Setting margin: 0 and padding: 0 on the html and body didn't fix it.
I've looked into overflow: hidden but I don't like it. I also looked into placing a clear:both div at the bottom, but that didn't do anything. I've looked into using min-height, but I can't seem to get it to work properly.
I have two questions:
Why is that vertical scrollbar appearing?
How can I remove the vertical scrollbar?
Live Example: http://jsfiddle.net/XrYYA/
HTML:
<body>
<div id="palette">Palette</div>
<div id="canvas">Content</div>
</body>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#palette {
float: left;
width: 300px;
height: 100%;
border: 1px solid black;
}
#canvas {
margin-left: 300px;
height: 100%;
border: 1px solid blue;
}
It's because of the 1px borders on each side of the element.
100% + 2px border(s) != 100%.
You could use box-sizing to include the borders in the height of the element.
jsFiddle example
div {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Alternatively, you could use calc() to subtract the 2px.
height: calc(100% - 2px);
jsFiddle example