I'm trying to create a content container in the middle of my site that can be no wider than a certain size (1194px), and will always have at least 242px margins on the left and right sides. If the container is wider than 1194px, the margins will grow. If the container is smaller than 1194px, the margins will stay 242px, shrinking the width of the container. Here's what I'm using and isn't working.
.mainContainer {
margin-left:242px;
margin-right:242px;
max-width:1194px;
}
But the container shrinks to fit the content. If I specify width:100%;, the margins will grow when the container is bigger than max, but the container will not shrink. What am I missing?
As a sub problem; I'm doing this in order to make my page responsive. Inside .mainContainer, there is a series of .projectContainer's, each 384px wide with 7px margin all sides. The width (including margins) of 3 of these adds up to the 1194px of .mainContainer. As of thus far, these values have been static. But now that .mainContainer is going to be fluid, I want the .projectContainer widths to also be fluid—as .mainContainer decreases in width, so should the .projectConatiner's.
My math figures that each .projectContainer, not including the 7px margin on each side, should be taking up 32.160804% of the .mainContainer:
384px * 3 = 1152px
1152px / 1194px = 0.96482412
0.96482412 / 3 = 0.32160804
Yet giving a value of width:32.160804%; to .projectConatiner doesn't seem to work. Is it a rounding error? How could I achieve what I'm looking for?
For the first problem:
see this fiddle
you can define the margin auto for the child div(width 1194 div), and min-width:1194+242+242=1678px for container,
this will make sure there is minimum margin of 242px on both sides, and when the page width increases the margin will increase(not the child width), and child remains 1194px only
<div class='container'>
<div class='child'>1194px</div>
</div>
.container{
min-width:1678px;
height:70px;
background:green;
}
.child{
background:red;
height:50px;
width:1194px;
margin:auto;
}
Use this buddy. No need for responsive css cause this is already responsive.
.mainContainer {
margin:0 auto;
max-width:1194px;
width:100%;
}
try using
#media screen and (max-width : 1194px) {
code css
}
for responsive style
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 simply can't figure this out: I have a div that is centered on screen with a width of 60%. Inside this div I have 3 more divs that float left with the width of 33% and have a gray bg color. The divs are filled with text and one image per div. Each div should now take 1/3 space inside the "maindiv". This works fine but as soon as I give my 3 "contentdivs" a padding so the text gets seperated a bit the third div wanders below the others. I also want a margin around my 3 divs so there is a gap between all the divs. But this only works if I give the divs a width of like 31%. As soon as I shrink my browser though, the third one pops up below the others again.
How it looks now:
How it looks with a width of 33.33%
How can fix this? I mean I set the divs to a relative width by setting the size in %. So the divs should just shrink as soon as I shrink my browser window. I tried to surround all the divs by other divs and messed around with margins and paddings but it just won't work.
Most likely it’s box model’s fault. Paddings, margins and borders can be added together in different ways. Add box-sizing:border-box to the container and its elements. Most certainly this brings about what you intended to do, and width:33.3333% wil work out as expected.
Adding margin still breaks the item? There’s another great thing called calc(). Assumed you have a margin of 8px, that’s just a few pixels too much. With calc(), you can subtract the additional margin like this:
.item{ width:calc(33.3333vw - 8px); }
Note that there must be whitespace around the minus. Try it and include your margin.
Apply box-sizing: border-box to all related elements (or the entire document, as Bootstrap does). http://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Then, rather than margin, use padding for the outer spacing. This eliminates the need to do mental math altogether.
div {
box-sizing: border-box;
}
.one-third, .inner, .full-width {
padding: 8px;
}
.one-third {
float: left;
width: 33.333%;
}
.inner {
background-color: pink;
}
<div class="full-width">
<div class="inner">Full-width div</div>
</div>
<div class="one-third">
<div class="inner">Content</div>
</div>
<div class="one-third">
<div class="inner">Content</div>
</div>
<div class="one-third">
<div class="inner">Content</div>
</div>
Fiddle demo
Your best bet would be to get the three columns and margins to equal 100%. This is fairly easy if you know you are only having three columns:
.item {
width:32%;
margin-left:2%;
}
.item:first-child {
margin-left:0;
}
As long as there is only three it will always add up to 100% as you are overriding the first .item. If you don't override the first item then you will have a space before your columns and the last column won't fit. Mixing pixels and percentages will give you issues in a grid (unless they're paddings and you are using box-sizing). Margin is not included in the box-sizing as it is not part of the main box model.
Related questions do not contain helpful answers.
I'm trying to create a headerbar for a website that has a width of 2000 pixels (so wide enough to cover most large screens), but which is centered, but I also do not want the parent container div (which is positioned left 50%) to cause the browser to overflow horizontally.
I can't just "overflow hidden" on the html or body tags, as I am not declaring a specific width (and declaring 100% doesn't hide the overflow).
The code I have looks like this:
<body>
<div id="navbgout">
<div id="navbg"></div>
</div>
#navbgout {
width:2000px;
height:60px;
position:relative;
left:50%;
}
#navbg {
width:2000px;
height:80px;
position:relative;
left:-50%;
background-image:url("images/header_bg.png");
}
I've tried putting another parent container around it to provide an overflow:hidden, but nothing works. If I set that parent to 100% width, it doesn't mask. If I set it to a fixed value in pixels, it isn't reflexively sized.
This is particularly vexing as the iPad's mobile Safari will read this "overflow" width as true width and zoom the page out extra far to account for it.
You don't need to declare the width as 2000px to cater for screensizes. If you set the width as 100% then it will always adjust to the width of the viewport.
Ideally you would set the width as 100%, then add a container class with e.g. max-width: 1200px; and margin: 0 auto; This will then make the navbar always the width of the viewport but also allow the content to be centered on the screen.
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
I’m trying to achieve a specific layout which I’ve tried to show here: http://tmp.grytoyr.net/layout/
Basically I am trying to have multiple absolutely positioned elements with their own scrollbars. The challenge is to get the height of the elements correct, so that the scrollbars look natural. Another requirement is that left and right should always occupy 50% of the main content area.
In Chrome and Safari on Mac it works as expected, but in Firefox the scrollbars for the scrollable elements that have been pushed down by the headers (menu, left, right) extend below the viewport.
I am guessing this is because Firefox interprets height: 100% on an absolutely positioned element with some content above it a little differently than Webkit browsers do.
Is there any way to achieve the desired layout in all modern browsers?
Edit: I’ll answer my own question since I just figured it out.
I had added "box-sizing: border-box" which I thought Firefox supported by now, but it turns out I needed to add "-moz-box-sizing: border-box" too.
Edit2: But be sure to check out the answer by rgthree, since that is a much better way to achieve the layout I wanted.
Yes, you cannot use height of 100% in this case, as that will be the height of the container and you have additional elements/padding/offset that is contributing to your overflow.
For instance, if a container's height is set to 500px, and you have a child content element with a height of 100%, its height will also be 500px. But if you start that child element under another element that is 50px (say, like a header in your example), then the total height is 550px (50px header + 500px "100%" content).
What you can do for your example, since everything is layed out absolutely, is use top/right/bottom/left. Here's the concept:
/* The container -- height/width doesn't matter */
.container {position:relative; height:500px; width:500px;}
/* A 50px tall header -- notice no width is set, but left/right is set to 0 */
.container > .header {
position:absolute;
top:0px;
left:0px;
right:0px;
height:50px;
}
/* The content under the header -- notice no height or width is set */
.container > .content {
position:absolute;
top:50px; /* 50px top to be below the header */
left:0px;
right:0px;
bottom:0px; /* Bottom is 0 so it will stretch the rest of the height */
overflow:auto;
}
Now, just apply this technique to all your nested items and you'll be in business.