I have the code below which is a div used for naviagtion its placed at the top of the page inside another div. It works in every browser I have tested in but IE 8/9.
CSS:
#nav
{
text-align: center;
background-color: #363A36;
color: #ffffff;
height: 25px;
padding: 10px;
margin-left: auto;
margin-right: auto;
width: 60%;
margin-top: -100px;
position: relative;
}
#nav a
{
text-decoration: none;
color: #ffffff;
padding-left: 10px;
padding-right: 0px;
margin: 7px;
border-left: 1px solid #ffffff;
}
#nav a:hover
{
color: #ffffff;
font-style: italic;
}
HTML:
<div id="header">
[HEADER]
</div>
<div id="nav">
Home
Tutorials
Blog
About
Contact
</div>
<div id="content">
Content Here
</div>
The div width is to large in IE and the length is too short I have included screenshots below
Thanks =D
in IE the padding is calculated as part of the width/height.
In all other browsers, padding is in addition to your defined width/height.
Example: a DIV that is 100px x 100px with 10px padding all around.
IE: total width/height = 100px x 100px
FF/Safari/Chrome: total width/height 120px x 120px
Here is a good resource for IE issues. Mostly IE6, but its helpful.
IE Cheat Sheet
Related
I have the following code:
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 20px;
height: 30px;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
The problem is that the <div class="perc"> can go up to width:95%;. How would I go about calculating pixels so that I can use JS 1%-100%. To clarify: I'm adding width with JS, so that's not an issue.
Why this happens
This issue is happening because you are setting the width to 100%, but the inner box also has a padding of 10px (in left and right) and a border of 2px. That makes it have an actual width of 100% of its parent width + 20px (10px margin on both sides) + 4px (2px border on both sides).
How to fix it
You could fix it in different ways. The easiest one would be to use box-sizing with a value of border-box:
The width and height properties include the padding and border, but not the margin.
The code would look like this (note how the height changes too):
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 35px;
width:100%;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
box-sizing:border-box;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
I'm experiencing the perennial problem of getting two columns with content of an uneven height to fill their parent container and be the same length independent of their content which will vary. I'm aware of some of the hacks for this such as using a vertically tiled background image on the parent object to simulate the columns but I also want rounded corners on the columns as well as them being different colours.
The height of the parent object is dictated by the height of the tallest 'child' column which is fine but the vertically smaller column's background shrinks to the size of its content making its background shorter than the background container. In this example I've coloured the usually invisible background object black for visibility and want the larger blue column on the left to fill this area vertically. In the case of the Blue column being taller, I want the inverse to happen and the yellow column to fill the black parent object.
I've simplified the layout to its simplest form to demonstrate the problem and the code and an image follow.
CSS:
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color: rgb(0,50,130);
position: relative;
}
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
text-align: left;
margin: 0px;
border: none;
padding: 0px;
}
/*auto-centering outer container box*/
.outer {
margin: 0px auto;
width: 960px;
text-align: center;
position: relative;
}
.top {
width: 960px;
height: 150px;
background-color: rgb(255,0,0);
border-radius: 6px;
}
.mid {
width: 960px;
float: left;
height: 100%;
margin-top: 35px;
background-color: rgb(0,0,0);
}
.midmain {
width: 710px;
height: 100%;
background-color: rgb(0,0,255);
float: left;
border-radius: 10px;
padding: 20px 20px 30px 20px;
margin-right: 6px;
}
.midside {
width: 180px;
height: 100%;
background-color: rgb(255,225,0);
float:right;
border-radius: 6px;
padding: 10px 10px 10px 10px;
}
/*Text rules for midside*/
.nav {
width: 180px;
}
.nav a, nav a:link{
display: block;
width: 178px;
height: 28px;
background-color: blue;
border: 1px solid rgb(0,20,100);
padding: 10px 0px 0px 0px;
margin-top: 0px;
margin-bottom: 10px;
border-radius: 6px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
color: white;
text-decoration: none;
}
.nav a:hover {
color: black;
background-color: white;
border: 1px solid rgb(128,0,0);
margin-top: -2px;
margin-bottom: 12px;
}
.bot {
width: 960px;
height: 100px;
float: left;
background-color: rgba(255,255,0,0.5);
margin-top: 10px;
margin-bottom: 20px;
border-radius: 6px;
box-shadow: 2px 2px 3px 3px rgba(0,20,60,0.3);
}
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Columns</title>
<link href="styles/col.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="outer">
<div class="top">
</div>
<div class="mid">
<div class="midmain">
Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
</div>
<div class="midside">
<div class="nav">
Home
News
Contact
About
Staff
Gallery
Video
Links
</div>
</div>
</div>
</div>
</body>
</html>
Any advice or help would be greatly appreciated!
Thanks,
Kw
Change the following definitions in your css:
.mid {
width: 960px;
float: left;
margin-top: 35px;
background-color: rgb(0,0,0);
position:relative;
}
.midmain {
position:absolute;
width: 710px;
min-height: calc(100% - 50px);
background-color: rgb(0,0,255);
border-radius: 10px;
padding: 20px 20px 30px 20px;
margin-right: 6px;
}
.midside {
width: 180px;
float:right;
background-color: rgb(255,225,0);
border-radius: 6px;
padding: 10px 10px 10px 10px;
}
With absolute positioning, the child element's height is defined relative to its parent.
If you're not keen on the min-height: calc(100% - 50px);style, you can use the following in its place. It will have the same effect:
top:0;
bottom:0;
I run into this situation as well sometimes. Basically run this against the elements that you wish to find the tallest (height), and apply that css to the other element(s).
Please note that you need (and should always) apply box-sizing:border-box; to all your elements, (ie - * { box-sizing:border-box;}
Fiddle for you
var heights = $(".mid > div").map(function ()
{
return $(this).outerHeight();
}).get(),
maxHeight = Math.max.apply(null, heights);
console.log(maxHeight);
$('.mid > div').css('height',maxHeight);
Also note that you should remove the height from your (2) div elements (since it's going to be overridden. Keep in mind as well that you "may" want to put this function in a $(window).resize() if you're doing responsive (which you should also), and you have media queries that change padding, etc.
I've recently got my website up and running. I'm in a bit of a rush at the moment, could anyone tell me of a way of styling the divs so they are all displayed horizontally. I'v got them all in a div.
#questionTitleDiv { width: 280px; height: 70px; margin: 10px 0px 10px 0px; padding: 10px 0px 10px 10px; border: 1px solid #FFFFFF; background-color: #F3F781; border-radius: 10px;}
#questionTitleDiv h2 { font-size: 18px;}
#shareButtonDiv { display: inline;}
#facebookSharer { display: inline;}
#twittertweet { display: inline;}
#google+Share { display: inline;}
#questionAnswerDiv { width: 250px; margin: 0px 0px 10px 0px; padding: 10px 20px 10px 20px; border: 1px solid #FFFFFF; background-color: #F3F781; border-radius: 10px;}
<div id="questionTitleDiv">
<h2>Question?</h2>
<div id="shareButtonsDiv">
<div id="facebooksharer" class="fb-share-button" data-href="http://www.example.com/examplehtml" data-layout="button_count"></div>
<div id="twittertweet"><a class="twitter-share-button" href="http://www.example.com/example.html" data-related="carpetinfo_com" data-size="medium" data-count="horizontal" data-counturl="http://www.example.com/example.html">Tweet</a></div>
<div id="google+Share" class="g-plus" data-action="share" data-annotation="bubble"></div>
</div>
</div>
<div id="questionAnswerDiv">
<p>answer!!</p>
</div>
when they display, the facebook div is a little lower than the others. I've tried positioning them absolutely, with the containing div positioned relative so it stays in the flow of the page. But they all jumble up. Vertical align doesn't work on them. and margin-top or padding-top doesn't work either, i', kind of stuck and in a rush.
Could a simple float work for you ?
#shareButtonsDiv div{
float:left;
}
http://jsfiddle.net/su3wt0hy/
I'm a having a little problem trying to put 2 divs in one line in Safari. It's just an HTML for a test (http://www.despegarboido.byethost22.com/) The problem is that when I open it on Safari, all of my rows collapse into the same column.
My html looks something like this:
<div class="row">
<div class="leftColumn"></div>
<div class="rightColumn"></div>
</div>
.row {
display: flex;
width: auto;
}
.leftColumn {
border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #ffff33;
width: 60%;
height: 330px;
margin: 5px 20px;
margin-right: 5px;
float: left;
}
.rightColumn {
border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #8cb6dd;
background: url(images/playa1.jpg);
background-repeat: no-repeat;
width: 40%;
height: 330px;
margin: 5px 20px;
margin-left: 5px;
float: left;
}
Those divs should be one next to the other, It works on every other browser, and I cant find a way to make it work on Safari.
You should reduce the width of your divs. The width of leftColumn is 60% and the width of the rightColumn is 40%. Your logic is correct, but you have not taken the margins into account. For example, you applied the following margin: 5px 5px 5px 20px to the div with the class name leftColumn. So, the total space leftColumn is occupying will be equal to 60% of the page + 25px. I am adding 25px to the total space because the right margin is equal to 5px and the left margin is equal to 20px.
Because you have not accounted for the margins when assigning the width to leftColumn and rightColumn your rightColumn is being pushed to the next line due to less space on the previous line.
Try to make them inline from the CSS as below,
Create a class say myDiv and within your CSS add below line,
.myDiv{
display: inline;
}
<div class="row">
<div class="leftColumn myDiv"></div>
<div class="rightColumn myDiv"></div>
</div>
Here is an example
Use the following code (recently updated):
<div class="row">
<div class="column" id="left">
<div class="inner" id="leftinner"></div>
</div>
<div class="column" id="right">
<div class="inner" id="rightinner"></div>
</div>
</div>
body {
margin: 0px; padding: 0px
}
.row {
display: flex;
width: auto;
}
.column {
padding: 5px 20px;
float: left;
}
.inner {
border-radius: 10px;
-webkit-border-radius: 10px;
height: 330px;
}
#leftinner {
background-color: #ffff33;
}
#left {
width: 60%;
padding-right: 5px;
}
#rightinner {
background-color: #8cb6dd;
background: url(images/playa1.jpg);
background-repeat: no-repeat;
}
#right {
width: 40%;
padding-left: 5px;
}
This version avoids repeating style definitions unnecessarily and also fixes the width problem. See it in action: http://cssdeck.com/labs/khpx1e8y
I have a container that I am calling #profile-grid and I want it to be 330px wide. It contains an image that is 330px wide and an inline list below the image that is 330px wide with a 1px border all around. I want the list and image to be exactly the same width. In IE it lines up perfect, but in Chrome it is 2px too short. What am I doing wrong? http://jsfiddle.net/ZPQUP/13/
The problem is, as your title suggested, the box model.
Your best bet is to just explicitly set the box model, and then use a polyfill to make it work for older browsers. Paul Irish describes the problem and solution here: http://paulirish.com/2012/box-sizing-border-box-ftw/
I've shown what this looks like in an updated fiddle here: http://jsfiddle.net/mstauffer/ZPQUP/14/
Essentially, the different box models differ on whether borders and paddings are included in or added externally to the width.
Your div#listed is 330px wide plus 1 pixel either side for the border. That's how the 'standard' box model works. Reduce the width by that 1 pixel each side (i.e. 298px) and everything will line up...
... in the good browsers. In older versions of IE, you'll see a problem. Use a valid DOCTYPE and that will be resolved.
DEMO:
HTML:
<div id="profile-grid">
<img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/428132_268919676513976_100001878373747_678116_241912084_n.jpg"/>
<ul id="listed">
<li class="item"> Profile </li>
<li class="item"> About </li>
<li class="item"> Photos </li>
<li class="item"> Albumlist </li>
</ul>
</div>
CSS:
#profile-grid {
height: 302px;
width: 330px;
}
#profile-grid img {
display: block;
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#listed {
height: 50px;
border: 1px solid #ddd;
overflow: hidden;
}
li.item {
margin: 0px;
display: inline;
float: left;
height: 50px;
border-left: 1px solid #ddd;
display: inline;
}
#listed li a {
display: block;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px;
color: #123454;
line-height: 50px;
padding: 0px 15px 0;
text-align: center;
text-decoration: none;
vertical-align: baseline;
}
#listed li a:hover{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px;
color: white;
background-color: #123454;
text-align: center;
text-decoration: none;
}
NOTES:
<ul> is a block element. whatever the width of the parent, it grows with it. sort of an automatic 100%. give the parent 330px, it also goes 330px.
as long as block elements don't have a specified width, the 100% width of it will include it's borders. so if you have a parent of 330px, the block element (in this case the <ul>) will be 298px wide + 1px left border + 1px right border.
on the other hand, specifying width for it will exclude borders in the count, thus the overflow.
giving an image display:block and width:100% also does the same thing PLUS it preserves the image ratio (and not squishing it in any way)
To avoid this issue, it is ideal to not mix width and padding or border on the same element.
In your case, if you simply remove the width: 330px from .listed and add it to .listed ul instead, you should be fine:
#listed {
display: block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 50px;
overflow: hidden;
border: 1px solid #ddd;
}
#listed ul {
margin: 0px 0px 0px -1px;
padding: 0px 0px 0px 0px;
overflow: hidden;
width: 330px;
}