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.
Related
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..
I'm currently working on my very first responsive webdesign working with Bootstrap 3.
What I now have is a full-width grid of user profile images. These images have a parent container which must be fully filled by the image. The parent container must have a fixed height because of the requested layout.
The problem is: Using CSS I only know how to fit either the width or the height, not depending on the size of the container.
You can see the problem in this jsfiddle:
http://jsfiddle.net/usD2d/
li /* container */ {
display: block;
overflow: hidden;
float: left;
width: 25%;
height: 100px; /* something fixed */
}
li img {
width: 100%;
min-height: 100%; /* destroys aspect ratio */
}
If you have a large screen, the images will fit perfectly. Having smaller devices the images will lose their aspect ratio.
Surely I could use #media(min-width) and change the img from width to height, but due to using BootStrap and having a very dynamic layout (collapsing sidebar, etc) this could become very tricky.
Is there any CSS only solution? If not, is there a great jQuery solution maybe also providing a focus point where to keep the focus on when cropping?
Thank you very much in advance!
If you want to fill entire space with image clipping it, ratio will be preserved but image will be partially hidden. vertical-align and negative margin can be used.
example: http://jsfiddle.net/usD2d/2/ keeping center image in center(like would a background-position: center center ;.
ul {
width: 100%;
}
li {
display: block;
float: left;
width: 24%;
height: 150px;
overflow: hidden;
border: 1px solid black;
text-align:center;/* set image in center */
line-height:150px;/* set image or text right in middle;*/
}
img {
min-width: 100%;
vertical-align:middle;/* okay see it in middle , but you can tune this */
margin:-50% -100%; /* okay, you can tune margin to crop/clip other area */
}
the negative margin reduce virtually size of image wich will center(text-align ) and sit on baseline set by line-height.
This a CSS cropping.
I think that you want the image to determine the width of the <li>. I removed the width: 25%; property, and your images kept their aspect ratio in your fiddle. So change
li /* container */ {
display: block;
overflow: hidden;
float: left;
width: 25%;
height: 100px; /* something fixed */
}
to
li /* container */ {
display: block;
overflow: hidden;
float: left;
height: 100px; /* something fixed */
}
I've spent 2 days trying to sort this out and I can't. I'd appreciate any help.
I have a container set to fill 100% vertically, which it does just fine. In the container I have another div for my header. Underneath the header, I want another div to also fill vertically 100% (from the bottom of the header to the bottom of the screen) regardless of how little content there is. The problem is, when I set the height for this div at 100%, it overflows past the bottom of the browser window, even if there is no other content in it. Just a long blank space. The overflow is the same size as my header.
If I remove my header, it works fine. And if I tell this div to not be 100%, then it will only go as deep as the content forces it, which won't be enough in some cases. I tried using overflow: hidden, but then that hides the shadow effect I have on the div.
You can view the page here
And the code in question is here:
#container {
height: 100%;
position: relative;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-bottom: -80px;
}
#bodybox {
height: 100%;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: -80px;
background-color: #FFF;
-webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
}
You'll notice my footer is hovering over the bottom. That's because of the overflow. I'm using this sticky footer solution in case that's important.
I'm a bit of a novice at CSS and I really want to avoid excessive Photoshop usage or tables, but I can't seem to get any tip or suggestion I've read to fix this. Please help. Thanx.
try
#bodybox{
height: calc(100% - 142px);
...
where 142px is the height of the header. Calc calculates the height according to the arithmetic in the parentheses. Note the equation will not more without the spaces before and after the operator. The same equation can be used to counter the effect of margins too.
If you set an element to have a relative height/width (with percentages), the height/width will be relative to it's direct parent (if some exceptions do not apply, I will not explain them here). But that doesn't take positioning into account. So your content div has exactly the height you asked it to be, but because it is pushed down by the header it appears to be taller.
You could use calc to calculate the height you want, or use the oldschool push back method.
You start with building the container, header and content div:
<div class="conatiner">
<div class="header"></div>
<div class="content"><h1>My Content</h1></div>
</div>
And apply some styles:
.container { width: 300px; height: 100%; } /* height can be anything */
.header { width: 100%; height: 100px; } /* header SHOULD have a fixed height */
.content { width: 100%; height: 100%; }
And to push back you add to the styles of the .content div: margin-top: -100px;, where the 100px should be the same height as the header. With the minus in front you tell the browser to pull it back instead of push it down.
Now you have two more problems to solve. The first one is that the content div covers the header div. You can fix that with applying z-index, although that requires you to add position too (as z-index only applies to positioned elements). So add those two rules to both header and content:
z-index: 1/0; /* header has z-index: 0, content has z-index: 1 */
position: relative; /* to 'activate' z-index 'behavior' */
Now we're almost there, but as you might see the content also disappears behind the header. To fix this, add a padding to the content div:
.content { padding-top: 100px; } /* again the 100px should be the same as the header height */
And now don't despair if you see the content div pushed down again. That is because the padding adds up to the height. Luckily my great friend box-sizing helps us out!
.content { box-sizing: border-box; -moz-box-sizing: border-box; }
And here we are (fiddle)!
Note: there are some other strategies, like, absolute positioning of the content div and/or header, using the calc functions, and others. Choose what suits you best.
Quick fix:
#header_bkgd {
overflow: hidden;
}
I'm guessing its to do with the fact that they both have a margin-bottom of 80px? one is taking off the other forcing it to overflow.
Do this:
CSS:
#bodybox{
margin-bottom: -80px; //Remove
// rest of the css
}
#container {
margin: 0
}
Ok, so am I missing something but I can't seem to line up a simple ul list of list items so that they stretch the entire width of their parent div. Here is an example of my problem here http://jsfiddle.net/37E55/17/.
What I'm trying to do is get grey boxes to line up in a row so that the first box's left hand edge is inline with left hand edge of the #wrapper div and the last box's right hand edge is inline with the #wrapper div's right hand edge.
I have tried successfully to line the boxes up by giving them an absolute positioning but is there a way to use a combination of margin and padding that I'm missing?
#wrapper {
width: 400px;
height: 300px;
background-color:#F0F0F0;
margin: 10px auto;
}
.box {
width: 92px;
height:92px;
background-color:#333;
margin:0px 10px 10px 0px;
float:left;
}
<div id="wrapper">
<ul>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
</div>
I knew there was a way to do it with inline-block instead of floating (if you do not have to support overly old browser).
Here's a fiddle demo!
The li do not have margin applied, they are evenly disposed in the area and cling to borders. I followed this guide.
ul {
font-size: 0 !important; /* remove physical spaces between items */
text-align: justify;
text-justify: distribute-all-lines; /* distribute items in IE */
list-style-type: none;
margin: 0;
padding: 0;
}
/* fully justify all items in browsers other than IE */
ul:after {
content: "";
display: inline-block;
width: 100%;
}
ul li {
text-align: left; /* customize to suit */
vertical-align: top; /* can customize to suit */
display: inline-block;
width: 31.3%; /* optional, only need for text content to wrap */
margin-bottom: 1em; /* optional, customize to suit */
}
use :last-child to select the last box and apply margin-right: 0 to it. Make sure the remaining margins will fill the space properly.
.box {
width: 92px;
height:92px;
background-color:#333;
margin:0px 10px 10px 0px;
float:left;
}
.box:last-child {
margin-right: 0;
}
If you have to stick with a width of 92px you won't get them to align properly. The remaining space that the margins need to fill is 32px, which doesn't divide evenly by 3.
The first thing you need to do is remove the last element's right margin.
.box:last-child { margin-right:0; }
Beyond that, sometimes you don't have the ability to fit elements with, for example, exact even margins based on their space and the size of the container. Sometimes you can apply different margins on (for example) every-other element to keep the layout looking "even" but to handle the lack of space, something like:
.box:nth-of-type(2n) { margin-right:14px } /* add extra pixels to right margin of even elements*/
In your case though, only one of the boxes needs extra margins, say, the first. Here's how I did it (with color contrast increased just to make it easier to see).
.box {
width: 90px;
height:90px;
background-color:blue;
margin:0px 13px 10px 0px;
float:left;
}
.box:last-child {
background:green;
margin-right:0;
}
.box:first-child {
background:yellow;
margin-right:14px;
}
Cheers
Your boxes with the margins were too large. Note that padding is in additional to the specified height and width. See it work on http://jsfiddle.net/37E55/32
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%.