I've written up a very basic HTML and CSS page to test out my responsive web design skills but the calculation of the padding is going wrong and I can't figure out why, any help from people would be greatly appreciated.
Below I have added my code for you to see. I have one 'main' with a 'section' and an 'aside' in it. Inside both are a box of two different sizes. I calculated the size and margin of the boxes ok but the padding won't work properly. I calculated the padding by target/context=result, which in this case for the first box is 25px padding / 500px = 0.05 (5%), and for the second box is 25px/300px= 0.08333333 (8.333333%).
However this does not cause a 25px padding but instead creates a much bigger one. When I look at the Google Chrome Developer Tool it tells me that the padding for the first box is now 56.875px and the second box is 94.797px.
I've been trying to solve this for sometime now trying different things but can't manage to figure it out.
Any help on this would be greatly appreciated. Code is below.
body, section, aside, p {
margin: 0;
padding: 0;
}
main {
width:90%; /* viewport is 1264px wide, 90% width is 1137.590px */
background-color: lightgreen;
min-height: 1000px;
margin: 0 auto;
}
section {
height: 500px;
width: 44.067133%; /* 500/1137.590 */
background-color: green;
float: left;
margin: 04.398736%; /* 50.031/1137.590 */
padding: 5%; / 25/500 */
}
aside {
height: 300px;
width: 26.434279%; /* 300/1137.590 */
background-color: blue;
float: right;
margin: 04.398736%; /* 50.031/1137.590 */
padding: 8.3333333%; /* 25/300 */
color: lightblue;
}
<body>
<main>
<section class="box-green">
<p>This is a green box</p>
</section>
<aside class="box-blue">
<p>This is a blue box</p>
</aside>
</main>
</body>
When you calculate padding in percentage, that amount is calculated by the width of the containing block, not the height.
https://developer.mozilla.org/en-US/docs/Web/CSS/padding
Padding, when given in percents, is based on the containing element not the height of the element itself.
Although this is not the correct way to write a responsive code but just to make you understand the padding % is not determined from the div size but its determined from the screen size. Also the margin you are using 4.398736% is adding on both left and right side of both the divs. Plus the padding of 5% on both side of .section and padding of 8.33333% on both side of .aside. its making the total size to 115.96555%.
For your understanding if you want both the divs (section and aside) to align side by side. Use the below written css style for both of them.
.section {
height: 500px;
width: 44.067133%;
background-color: green;
float: left;
margin: 02.199736%;
padding: 5%;
display: inline-block;
}
.aside {
height: 300px;
width: 26.434279%;
background-color: blue;
float: right;
margin: 02.199736%;
padding: 5%;
color: lightblue;
display: inline-block;
}
Hope this helps..
Related
I'm using float to align 3 div ( left, center, right ). the first picture show how it looks on
on Google Chrome. the second picture show how
it looks on Microsoft Edge . a float works fine on Google Chrome, when using Microsoft Edge the last div(right) moved to a left-bottom container. why this is happens
* body,
p,
img {
margin: 0;
}
.container {
width: 900px;
border: 5px solid green;
padding: 3px;
margin: auto;
}
.left {
background-color: blueviolet;
width: 150px;
height: 300px;
line-height: 100px;
text-align: center;
float: left;
}
.center {
width: 600px;
height: 300px;
background-color: burlywood;
float: left;
}
.right {
width: 150px;
height: 300px;
background-color: coral;
float: left;
}
.clear {
clear: left;
}
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
The CSS you wrote make the output appear as in the picture. In your container you used border and padding. The two will cause the actual width of the container to be less than 900px on some browser. So the width is 900 - (5 + 5) - (3 + 3) = 884px.
Possibly, chrome tried to understand what you want, but Edge give you actual output. This is expected as border and padding affect the final width of div containers. Though, setting margin does not affect it.
To resolve the issue and cause the three dogs to appear on same line on all browser, i.e the coral div to appear on the right, you will add the following CSS to your container (or preferably body tag):
box-sizing: border-box;
You can read more at https://css-tricks.com/box-sizing/
Don't forget to add all the Vendor Prefixes
I am new to web design (as you can tell) and playing around with page layouts. I have build the following very basic fluid page that has two column divs (floats) and one div below that I want to set the width to match that of the two floated ones above. As you can see from the screen grab, the red 'strip' isn't as long..
So basically what I have is 2 divs (#main and #extras) floated left. #main has a width of 65% and #extras has a width of 20%. Main has a left and right margin of 3.666666666666667% and #extras just a right margin of 3.666666666666667% which centers it on the page pretty much. I also have 1% padding for both #main and #extras.
I set the third div .strip (which should be exactly the same length as the #main and #extras combined as follows:
left/right margin 3.666666666666667%
2% padding (to equal the combined padding of the #main and #extras divs)
width: 85%
My calculations (although my math is terrible) makes that add up and as far as I can tell the third div #strip should be as long as the two above. But as from the picture, it isn't.
Is this something to do with a compounding effect?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
#header {
width: 100%;
background-color: gray;
margin: 0;
}
#main {
float: left;
width: 65%;
background-color: steelblue;
margin: 0 3.666666666666667%;
padding: 1%;
}
#extras {
float: left;
width: 20%;
background-color: orange;
margin: 0 3.666666666666667% 0 0;
padding: 1%;
}
#footer {
width: 100%;
clear: left;
background-color: gray;
margin-top: 5%;
}
.strip {
margin: 0 3.666666666666667%;
clear: left;
background-color: red;
padding: 2%;
width: 85%;
}
</style>
</head>
<body>
<div id="header">2 divs
<p>Header</p>
</div>
<div id="main">
<p>Main content</p>
</div>
<div id="extras">
<p>Extra stuff</p>
</div>
<div class="strip">
</p>I am the strip</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
ts</html>
Its probably wrong calculation.. You can understand this by seeing this image., where the extra margin adding up!
Try this code:
Fiddle:
CSS:
#main
{
float: left;
width: 65%;
background-color: steelblue;
margin-left: 3.666666666666667%;
padding: 1%;
}
The problem is in the calculation. The first line width with values that you have add on properties is around 95.98% but the next lin (red div) the width is 88.86 %. Check the calcultions :)
The two divs as the top have padding between them, their combined width without padding is 85%, you need to set the width of strip underneath to 85% + the width of the padding between the top divs.
Your margin is not set correctly, you have to explicitly specify right margins. Make it like this:
#main {
float: left;
width: 65%;
background-color: steelblue;
margin: 0 0 0 3.666666666666667%;
padding: 1%;
}
See this fiddle: http://jsfiddle.net/wCWQL/
Your earlier css was this:
margin: 0 3.666666666666667%;
This is a shorthand, where the first value is for top and bottom margins and the second value is for right and left margins.
So you have to explicitly specify all margins so that only the left one is set.
Alternatively, you can only set the left margin:
#main {
margin-left: 3.666666666666667%;
...
}
Hope that helps.
I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of the content hidden, so how I can fix this?
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px;
margin-left: 10px;
padding: 0;
-webkit-user-select: text;
}
Because you're using position: absolute, instead of using:
width: 100%; margin-right: 10px; margin-left: 10px
you should use:
left: 10px; right: 10px
That will make your element take the full width available, with 10px space on the left and right.
You have to remove the margins on the #news item
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px; /*REMOVE THIS*/
margin-left: 10px; /*REMOVE THIS*/
padding: 0;
-webkit-user-select: text;
}
If this doesn't work, you might have margin and padding set on the element itself. Your div - if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0 and add !important as well.
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin: 0 !important;
padding: 0 !important;
-webkit-user-select: text;
}
It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.
Try googling for "css flexible ( two/three-collumn) layouts".
Here's an example,
<div id="cont">
<div id="menu"></div>
<div id="main"></div>
<div class="clear"></div>
</div>
and the css
#menu{
float:left;
height:100%;
width:200px;
}
#main{
padding-left:200px;
}
.clear{clear:both;}
The #menu div, will be aligned to the left and have a static width of 200px.
The #main div, will "begin" below #main, but because of it's 200px padding (can also be margin) its content and child elements will start - where #menu ends.
We must not set #main to a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.
I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:
box-sizing=border-box
Otherwise I always had a little content and padding pushing past the scroll bar.
The answer is that you have margins set that will make the div wider than the 100%; hence the scrollbars.
If you can rid yourself of margins do it! However, often you'll want the margins. In this case, wrap the whole thing in a container div and set margins to 0 with width at 100%.
Above is a screenshot of what I'm trying to accomplish. I tried setting height:100%, but I get an "overflow" caused by having margin-top:48px, causing me to scroll down even though the content fits on 1 screen.
Right now the content is only up to the colored part (I edited it out for clarity).
It's CSS is:
#main_area {
float: left;
width: 600px;
margin-top: 48px;
padding: 0px 20px;
}
.sidebar { /* this one here */
float: left;
left: 10px;
width: 278px;
padding-top: 48px;
padding-right: 20px;
padding-left: 20px;
background-color: #FFFFFF
}
Alas, floated DIV's are not a good solution for what you're trying to achieve - this is one of those situations where you're going to have to revert to using a multi-column TABLE or get funky with Javascript.
Remember - when you float a DIV, it is essentially removed from the page flow layout and is floated over the page's contents. Setting the height to 100% won't set the height of your column to the height of the page it floats over - it sets the height of the floated DIV to the combined height of the floated DIV's contents.
There's a pretty good description of this in "Head First HTML" from O'Reilly.
To be honest, if you want to create really controllable multi-column page designs, TABLEs are likely to be your best bet.
I find something wrong with below css ,can you fix this first.
you gave left as 10px , but didn't mention as absolute , do you want this as absolute..??
and from the screenshot , i didn't get what exactly you want can you explain it more
.sidebar { /* this one here */
float: left;
left: 10px;
width: 278px;
padding-top: 48px;
padding-right: 20px;
padding-left: 20px;
background-color: #FFFFFF
}
do the below code in window resize event
var docHeight = Math.max(
$(document).height(),
$(window).height(),
/* For opera: */
document.documentElement.clientHeight
);
var docWidth = Math.max(
$(document).width(),
$(window).width(),
/* For opera: */
document.documentElement.clientWidth
);
$("#yourdiv").css({
"height":docHeight,
"width":docWidth
});
}
Better late then never. Thought this might help:
The htmls
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
The csss
#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }
You can view this # https://github.com/gutierrezalex/two-column-layout
I am building a 3 column web page (header & menu bar above a left nav, main area and right sidebar with a full width footer on the bottom). I have background colors for each column but they cut off at the end of the text instead of filling the whole column. Is there a way to fill the whole column that does not rely on using a table (td)?
Here is my CSS for the general layout:
#container
{
float: left;
width: 100%; /* IE doubles the margins on floats, this takes care of the problem */
display: inline; /* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */
margin-left: -200px;
}
#left
{
float: left;
width: 180px; /* IE doubles the margins on floats, this takes care of the problem */
display: inline;
margin-left: 200px;
padding: 0px 0px 0px 5px;
background: url('/App_Themes/Default/images/RightColumnBackground.png') repeat left top;
}
#main
{
/* the width from #left (180px) + the negative margin from #container (200px) */
margin-left: 380px;
padding: 0px 0px 0px 5px;
}
#sidebar
{
/* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
padding-left: 100%; /* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
margin-left: -220px;
}
I know I can set a height in the style but that pins the height to a certain number of pixels. Is there a height: fill; type option?
This is a very common problem. A good approach is to use faux columns.
Not in any CSS that'd be currently widely supported across browsers, but there are ways of approximating it.
What you need is the Perfect Liquid Layout in Percentage widths, em widths, or pixel widths.