So I'm trying to get divs to fit perfectly in a wrapper using fixed pixels for width and height. Although I'm confused as to how the pixels don't add up properly.
HTML
<div class="div1">
<img src="image.png" alt="image" class="image">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
CSS
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
white-space:nowrap;
}
.div1 {
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url(image.png) no-repeat center;
background-size: cover;
width: 690px;
height: 265px;
}
If the parent div is 690px wide why can't the child divs add up to 690 with calculated widths, margin and boarders.
(div1)180 + 30 + (div2)285 + 30 + (div3)165 = 690px
If you look at div 3 it's right border can't be seen. You have to reduce the width by 7px to see it.
This is also happening vertically with a 190px div3 height meant to touch div4 exactly but is off by 4px.
Is this a browser issue? Default Alignment issues I'm not aware of? I'm really curious to know why this happens!
Any feedback would be appreciated. : )
If you put comments like this in your HTML you can fix the top but for the image in the 2nd line I dont know yet I continue trying
OK SO I did put the 1st line in a div "test" and gaved him display:block and overflow hidden to take away the the space under and then I did give the div1 fixed heigth and width 180px (image+border)
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
}
.test{
display:block;
overflow: hidden;
}
.div1 {
height:180px;
width:180px;
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url('http://lorempixel.com/690/265/cats') no-repeat center;
background-size: contain;
width: 690px;
height: 265px;
display:block;
overflow: hidden;
}
<div id="wrapper">
<div class="test">
<div class="div1">
<img src="http://lorempixel.com/172/172/cats" alt="image" class="image">
</div><!--
--><div class="div2">
</div><!--
--><div class="div3">
</div><!--
--> </div><div class="div4">
</div>
</div>
have you checked out box-sizing feature?
Here is some links that might be helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 6 years ago.
Don't mind the commented out lines. I'm experimenting with the box model, but can't seem to figure out why I can't use margin-top to drop the yellow box a bit down? I can use margin-left to get it to move to the right, so that seem weird to me... Thanks.
I'd like to understand why this happens :)
.largebox {
width: 800px;
height: 350px;
background-color: #00f;
//padding-left: 50px;
margin-left: 10px;
//border: 2px solid black;
}
.box1 {
width: 250px;
height: 300px;
background-color: #ff0;
//display: inline;
//float: left;
//margin-right: 0px;
margin-left: 50px;
margin-top: 25px;
}
<div class="largebox">
<div class="box1"></div>
</div>
This happens due to margin collapsing - so a border, padding to the parent element or inline content (any inline element) will switch off margin collapsing.
See demo below:
.largebox {
width: 800px;
height: 350px;
background-color: #00f;
margin-left: 10px;
border: 1px solid; /*ADDED THIS*/
}
.box1 {
width: 250px;
height: 300px;
background-color: #ff0;
margin-left: 50px;
margin-top: 25px;
}
<div class="largebox">
<div class="box1"></div>
</div>
Use display:inline-block; in box1
.largebox {
width: 800px;
height: 350px;
background-color: #00f;
//padding-left: 50px;
margin-left: 10px;
//border: 2px solid black;
}
.box1 {
width: 250px;
height: 300px;
background-color: #ff0;
//display: inline;
//float: left;
//margin-right: 0px;
margin-left: 50px;
margin-top: 25px;
display:inline-block;
}
<div class="largebox">
<div class="box1"></div>
</div>
You can try using position:absolute; in .box1 like this:
.box1{
position:absolute;
}
https://jsfiddle.net/3Lthpf72/5/
Html css with jsfiddle ex: not working: vertical align and using full width based on width percentage of two child containers
When I make the two child containers add up to the parent width percentage, it folds down. Also the vertical align middle is at the bottom, not the middle.
Any thoughts?
.payee.list-item {
border: 1px solid red;
height: 100%;
width: 300px;
}
.list-item-content {
display: inline-block;
border: 1px solid blue;
width: 80%
}
.payee.list-item>img {
border: 1px solid green;
height: 45px;
display: inline-block;
width: 17%;
vertical-align: middle;
}
<div class="payee list-item">
<img src="/Image/PayeeBillPayAccountPortrait/832">
<div class="list-item-content">
<h4>Colonel Sanders!</h4>
<h3>Colonel Sanders</h3>
</div>
</div>
Are you trying to do something like that?
.payee.list-item {
border: 1px solid red;
height: 100%;
width: 300px;
display: inline-block;
position: relative;
}
.list-item-content {
float: right;
border: 1px solid blue;
width: 80%
}
h3, h4 {
width: 50%;
float: left;
box-sizing: border-box;
padding: 6px;
}
h3{background: lightgray;}
h4{background: gray;}
.payee.list-item>img {
border: 1px solid green;
max-height: 45px;
width: 17%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="payee list-item">
<img src="https://static.pexels.com/photos/6555/nature-sunset-person-woman.jpg">
<div class="list-item-content">
<h3>Colonel Sanders</h3>
<h4>Colonel Sanders!</h4>
</div>
</div>
I cant see any output in my left and right divs.I can only see the header and footer but not the rest.I am a beginner so please try to answer in simple terms.
Kindly try to point out the error/bug instead of altering the code.
#header {
height: 50px;
width: 1600px;
border: 2px solid red;
border-radius: 5px;
background-color: Aquamarine;
position: fixed;
z-index: 1;
}
.left {
height: 500px;
width: 700px;
border: 2px solid green;
border-radius: 5px;
background-color: Lavenderblush;
float: left;
}
.right {
height: 500px;
width: 700px;
border: 2px solid blue;
border-radius: 5px;
background-color: lightblue;
float: right;
}
#footer {
height: 50px;
width: 1600px;
border: 2px solid black;
border-radius: 5px;
background-color: Yellow;
clear: both;
}
h1 {
text-align: center;
margin: auto;
color: Blue;
font-family: Verdana;
}
h4 {
text-align: center;
margin: auto;
color: Blue;
font-family: Verdana;
}
<div id="header">
<h1>My Resume</h1>
</div>
<div class="left">
<p>Hello how are u</p>
</div>
<div class="right">
<p>some random data here</p>
</div>
<div id="footer">
<h4>This is the footer</h4>
</div>
The header is position: fixed so it is taken out of normal flow (i.e. it doesn't influence the start position of content outside it) and covers the top of the content that immediately follows it.
I haven't loaded this code but likely, your fixed header with a height of 50 is hiding the text you're expecting to see. You could add a margin-top: 50px to .left and .right so they clear the fixed header.
I have a container of certain height and width that holds a number of children (divs). I would like to have a 4px lightblue border around each div. Two neighboring divs should only have 4px space between them.
I'm able to accomplish this by manually setting the heights, widths, and margins/borders, but I'm sizing the children by percentage of the parent.
Here's a fiddle I have set up showing the divs in the parent, but without any spacing or border.
.container {
height: 300px;
width: 300px;
background-color: lightblue;
}
.left {
width: 30%;
height: 100%;
background-color: lightyellow;
float: left;
}
.top-right {
width: 70%;
height: 50%;
background-color: lightred;
float: right;
}
.bottom-middle {
width: 35%;
height: 50%;
background-color: lightpink;
float: left;
}
.bottom-right {
width: 35%;
height: 50%;
background-color: lightgreen;
float: right;
}
.border {
/* margin: 4px; */
}
<div class="container">
<div class="left border"></div>
<div class="top-right border"></div>
<div class="bottom-middle border"></div>
<div class="bottom-right border"></div>
</div>
http://jsfiddle.net/ymv0oave/
2px border for all divs, and 2px border for container.
.container {
...
border: 2px solid blue;
}
.container div{
box-sizing: border-box;
border: 2px solid blue;
}
https://jsfiddle.net/afelixj/mja5kfvw/
Putting the full answer here
.border {
/* margin: 10px; */
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid red;
padding: 4px;
}
.remove-right{
border-right: none;
}
Then put the class to your div class tag
<div class="container">
<div class="left border remove-right"></div>
<div class="top-right border remove-right "></div>
<div class="bottom-middle border"></div>
<div class="bottom-right border"></div>
</div>
You can use the calc() function is css to make use of % and still have an exact 4px border.
HTML:
<div class="container">
<div class="left border-right"></div>
<div class="top-right border-bottom"></div>
<div class="bottom-middle border-right"></div>
<div class="bottom-right"></div>
</div>
CSS:
.left {
width: 30% //Fallback for the 0.8% people still using IE7/IE8
width: calc(30%-4px); //HERE
height: 100%;
background-color: lightyellow;
float: left;
}
.top-right {
width: 70%;
height: 70% //Fallback for the 0.8% people still using IE7/IE8
height: calc(50% -4px); //HERE
background-color: lightred;
float: right;
}
.bottom-middle {
width: 35% //Fallback for the 0.8% people still using IE7/IE8
width: calc(35% -4px); //HERE
height: 50%;
background-color: lightpink;
float: left;
}
.bottom-right {
width: 35%;
height: 50%;
background-color: lightgreen;
float: right;
}
.border-right {
border-right: 4px solid lightblue;
}
.border-bottom {
border-bottom: 4px solid lightblue;
}
Okay, so this is all supposed to be in one 139px height header and it renders as such in dreamweaver, but as soon as I view it in a browser the menu div splits down onto a second row.
Here's the HTML:
<div id="header">
<div id="header2">
<div id="title">
<img src="titleimg.png" border="0" />
</div>
<div id="menu">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
</div>
</div>
And here is the CSS:
#header {
top: 0;
left: 0;
position: fixed;
height: 139px;
width: 100%;
background-image: url('headerbg.png');
border-bottom: solid 1px #797978;
text-align: center;
display: inline-table;
}
#header2 {
width: 1040px;
margin: 0 auto;
text-align: left;
}
#title {
padding-top: 27px;
width: 287px;
height: 112px;
background-image: url('title3d.png');
background-repeat: no-repeat;
background-position: right bottom;
float: left;
}
#menu {
width: 753px;
height: 13px;
border-left: solid 1px #474747;
display: inline-table;
}
#one {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#two {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#three {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#four {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
#five {
width: 19%;
height: 139px;
border-right: solid 1px #474747;
float: left;
}
Help would be greatly appreciated!
You are making the mistake of thinking your total width is 1040px by just adding up the width of #menu and #title but you are forgetting that you also have a 1px border-left on your #menu hence your width becomes 1041 and hence gets pushed over. so if you reduce either the menu or title's width by 1pixel you will be good to go :)
Also you can save some code on the css for the menu elements if you are going to repeat the same code for #one, #two etc etc:
#menu > div {
width:19%;
height:139px;
border-right: solid 1px #474747;
float:left;
}
The width of your title element is set to 287px; which is larger than the container.
I have tweaked up your code a little bit to make it sane.
http://jsfiddle.net/gwfQt/
The issue what you are actually facing is, you have divided the width of #title and #menu completely within 1040px which is the width of your header.
However, you didn't take into account that DIV within #menu has borders.
Also suggest you use classes if you have repetitive styles for different divs.
Let me know if I can improve my answer with better code.