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
Related
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
I'm having a problem with understanding how to properly use the percentage height property in CSS.
It has been a useful tool for me in the past, when sizing elements with respect to the page size.
However I have come across a problem when using percentages to specify properties of divs within divs.
For example,
<div class="outer">
<div class="inner">
Hello
</div>
</div
In the above code, I set the text of the "inner" class to have a top-margin of 5%, which successfully pushes the text down from the top edge of the "outer" class.
However, I was told that the 5% would be relative to the parent of the element, which I would assume would be "outer" (because it is within the outer div tags). It actually acts as 5% of the page height, which pushes it down much further than intended.
I'm probably missing some quirk of HTML/CSS, because I'm still relatively new to this, so any help would be appreciated.
Thanks in advance :)
edit: I now understand that the problem lies on certain parent elements not having static dimensions, however is there a way to avoid this but still have relative heights/widths on child elements? It would seem silly to define the body with a static height/width, which would just seriously limit the site's accessibility on devices with other dimensions.
Relevant CSS code for "outer" (bear in mind I just used outer/inner as examples, and below is the actual code I've been using)
.login_center_panel
{
width:50%;
height:30%;
background-color:#3D3D3D;
margin-left:auto;
margin-right:auto;
float:top;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
font-family: "Verdana", Arial, sans-serrif;
color:white;
padding:1px;
}
and below is the relevant css for "inner"
#signinGreetText
{
margin-top:5%;
}
The margin-top property of signinGreetText still acts as 5% of the whole page, and not as 5% of the height of login_center_panel
The % is based on the width of the containing element. You need to specify a width or max-width property for your .outer div or use a different measurement for your top margin.
To see how the % is based on the width change the width of the page while viewing your current code. The top margin should change with the width of the page.
Do you have a height set for 'outer'? If not, this is why the margin is bigger than you expected. If you set a height for 'outer' you will notice the margin will scale accordingly.
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.
Is it possible to have 100% height but have the div fill out the entire page only.
So if i put 100% height on a div, it should extend the div all the way down to the end of the page but not extend anymore to bring any scroll bars. Is that possible? I know height:100% takes the page's height and puts the div's height to that number but I don't want the div to actually have the height of that number, but only extend till end of page, no more than that.
Is it possible with 100% height or anything else?
I appreciate your help.
Thanks
you can use
<div style="top:0;bottom:0,left:0,right:0;"></div>
or using jquery:
$("#mydiv").height($(window).height());
Without padding or border, if you declare the html, body, and div 100%, it will extend to the size of the browser window.
If you want to use padding and border, consider using the CSS3 property box-sizing: border-box;
Demo
Update:
Using pseudo-elements (you could use an empty div):
.top{height:100px; width:100%; position:absolute; top:0; left:0;}
.rest{min-height:100%; background:lightblue; }
.rest:before{content:''; display:block; width:100%; height:100px;}
Demo
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.