I am creating a simple 2 column layout for a website, but have struck a bit of a problem. When I add padding to the column which has float:left applied, the float expands past the width I have defined. I can't seem to find an answer for this anywhere.
You have to adjust the width, because when your page is rendered padding is considered as part of the width.
Say you have a div that should be 200px, with a rightward padding of 10px.
.box {
width:200px;
padding-right:10px;
}
Your actual width will be 210px.
Related
3 div.
body margin of 10px.
Picture on the bottom
I want the divs to equally have the same width, the same margins on the sides while also covering/using the whole browser's width whichever size it is (desktop, tablet, mobile)
Here's what I did by using pourcentage and what I believe:
" The full browser width is 100%
If the div's margin are 10px and the body's margin are 10px then
The div's width would be around 30%.
Let's try 30%.
It fits - blank space too.
Let's try 30.5%.
Blank space, it's not equal on the sides.
Let's put 32%.
etc. "
but often I get extra blank space on the right or one div to go down because it's actually too wide.
Is there a more simple way to do this? Properties?
Thank you.
Design:
Media queries:
Your issue stems from the fact that you are mixing relative units with absolute ones - pixels are an absolute unit as 10px is always 10px, but a percentage is relative to the screen width, so no matter how close you can get it to fitting the full width of the screen, as soon as you change the width of the screen all of the values are going to change.
You have (at least) two options here:
First, switch all your units to percentages, so that every measurement is relative to the width of the screen. In other words, if you use percentage based margins, you will know exactly how much space you can allocate to each thing.
Alternatively, if you really need the margins to be an absolute pixel width, use CSS calc:
This feature of CSS allows you to mix unit types easily, and let the browser do the math to figure it out.
For example:
width: calc(33.333% - 20px);
will style the div to take up one third of the screen width, minus the width of a 10px margin on the left and a 10px margin on the right.
If all three divs have this width, the total space taken up will equal to 100% of the screen, with the space for all of the margins accounted for.
(if you want the first and last divs to have no margin on the left and right respectively, just change the calculation to match!)
More Information About 'Calc'
Extra tip! Remember that white-space in your code will add spaces in between your elements, so if you style everything to fill exactly 100% width, these extra spaces may still cause your items to break if you have not dealt with this
I would say the best way to approach this is have container elements for each div, so a structure like this:
<div class="container-full">
<div class="container-third">
<div class="content">
Hello world
</div>
</div>
</div>
.container-full{
width: 100%;
}
.container-third{
width: 33.33%;
padding: 10px;
}
.content{
width: 100%;
}
Utilize padding, instead of margin. Make sure to use box-sizing: border-box
display:flex is already widely suported, so you can rely on that instead of floats.
if you don't use box-sizing:border-box; for all the elements - you could at least for the divs in question along with a 10px padding.
Here goes sass:
.container {
display:flex;
& > div{
flex:0 0 33.33%;
padding: 10px;
box-sizing: border-box;
}
}
or you could use a percentage margin between the divs.
.container div{
width:30%;
float:left;
margin-right:5%;
}
.container div:last-child{
margin-right:0;
}
I figured out how to get it to not stretch over the left side by using margin-left but when I try to get the right side by using margin-right it doesn't work. Is there another way to do this in CSS?
Here's what I got..
HTML
<div class="Heading">Painting</div>
<hr draggable="auto" color="#FB2529">
CSS
hr { color:#FB2529;
width:100%;
margin-top:-15px;
margin-left:29%;
height:.2px;
}
You can make it work by adjusting the width property in your css.. margin-left and margin-right should also be relative to the width..
when you adjust the margin in the left, the width is still 100% in the page and so, the right overflows...
to fix that, I suggest using this:
hr {
color:#FB2529;
width:98%;
margin-top:-15px;
margin-left:1%;
margin-right: 1%;
height:.2px;
}
as you can see the sum of width, margin-left, and margin-right totals to 100% representing the width of the area.. if you want to set it instead in pixels, you can.. however, you should know the specific width in pixels also..
I have a DIV which will contain the content for a website of mine. On the left side there is a menu which has its position set to float. When I re-size my browser the container gets under the box and it looks quite bad.
This is how it looks like:
I have tried to put all the relevant HTML and CSS in this fiddle: http://jsfiddle.net/Dugi/qZ67C/
How would I make the DIV container have itself getting smaller against the floating menu and not get under it?
You can set the .container to float left, and then increase the margin-left until it is out from under it. You could also shrink the width of the .container. Both worked while I was playing with the fiddle, but you'll have to adjust your table.
Here is the fiddle, with .container floated left, and a margin-left big enough to slide it out.
Here is the fiddle, with a smaller .container width.
The challenge is that you have percentage width on .sidebar, but also a min-width.
One solution is to place a min-width on .outer. This will prevent .content from slipping under .sidebar. as it down-sizes, but will cause .outer to overflow the viewport and induce a scrollber when the viewport is sized below 750 (minus .outer margin) pixels.
Here's your fiddle with the simple change of setting min-width on .outer to 750px: http://jsfiddle.net/qZ67C/5/
I have decided to move over to percentages rather than fixed pixels in the hope of minimizing the input for a fully responsive website, but have already encountered and error. I am on the nav bar, and when testing how it looks, the text just overflows off the screen like nothing at all is stopping it! I don't know why I have tried : Putting it in a wrapper, Setting a max width, changing padding, Margin:0 auto;
#nav{
width:100%;
height:10%;
position:fixed;
background:#ccc;
padding-left:10%;
padding-right:10%;
}
From the looks of it the problem could be your height attribute. I'm assuming the text is spilling down the screen, not off the side of it?
Having a set height is usually a bad idea, especially as percentage heights can be quite irritating to work with. For example, inline elements take their percentage widths and heights from whatever is inside them. If that's the word "hello" then it's 10% of however much of the screen that word would take up.
With responsive design it's usually best to use a percentage for your width and just set height to "auto", or on most browsers you can just not put it in your CSS as "auto" is the default value anyway.
However, for a quick fix that'll stop text spilling out of the box, "overflow:hidden" will hide anything that flows outside of the element.
You should use box-sizing:border-box, so the total width of the box (including borders, margin and paddings will be 100%).
#nav{
width:100%;
height:10%;
position:fixed;
background:#ccc;
padding-left:10%;
padding-right:10%;
box-sizing:border-box;
}
If you don't use the border-box box-sizing, then the total width of the box will become the specified width + padding + margin + borders.
Read about the box model here: http://www.w3schools.com/css/css_boxmodel.asp
So I know there are tons of questions similar to this but I havent been able to find an answer to this specific question.
If I have a two column div layout, I want the div on the left to have a fixed width of 250px and a margin-left: 5%; (just the way I want it setupf for my design)...
the second div (the one on the right) I want to basically go to the end of the screen to the right. So the left div is 250px with a margin-left of 5% and I want the second div (the one on the right) to fill the entire rest of the browser.
On the second div I have tried a float left with a 100% width, but that makes the second div go to the bottom of the first, and fills up the screen. If I give the second div a fixed witdth, of coarse the float works but it doesnt fill up the browser window...and if you move the browser window smaller than the second div, it gets pushed down again to the bottom of the first div...
Is there anyway, with just css, to have one div with fixed width(and margin-left with a percentage), and the next div straight to the right of the first (like a float would normally work) with a percentage of 100% (or something like that) so that it fills the rest of the screen???
o ya I also need both divs to have height 100% if that makes a difference...Thanks!
Write like this:
CSS
.left{
float:left;
background:red;
width:250px;
margin-left:5%;
}
.right{
overflow:hidden;
background:green;
}
HTML
<div class="left">fixed</div>
<div class="right">right</div>
Check this http://jsfiddle.net/ds8Ws/