I made a template with 2 columns with CSS like this picture.
The main div is main. It has 2 dives inside itself. DIV sider has a background-image. And I want to show it always. Now, I have 2 problems. First, it does not cover height of screen by default unldess I set a min-height=... for it. Second, if I do it, after scrolling the page, the background images won't repeat to cover whole of screen height.
html {
margin:0 0 0 0;
height: 100%
}
body {
font-family:Arial;
font-size:9pt;
color:#333333;
line-height:200%;
margin:0 0 0 0;
background: #f0f0f0 url('../images/bg-radial-gradient.gif') fixed 230px top no-repeat;
width:100% !important;
height: 100%
}
#main {
width:100%;
min-height: 100%
}
#sidebar {
width:231px !important;
float:left;
background-image:url('../images/sidebar_bg.PNG');
min-height: 100%;
}
#container {
float:left;
padding:25px 25px 25px 25px;
width:70%;
min-height: 100%
}
What's the problem?
Edit: This is my backgroun image
Try this - DEMO 1 : Unwanted white space
The additional space in the bottom is because of your padding:25px; ( Same as padding:25px 25px 25px 25px;).There's an extra top padding + bottom padding which is givin your div additional 50px.
If you do not want that additional space - Try this => DEMO 2 : without the white space
You can replicate the same effects of top and border 25px with this:
padding:0 25px;
margin:25px 0;
To avoid that extra unwanted space.
Edit:
The additional space is caused by the margin:25px 0;, if you remove it - you wont have that extra space.check this
DEMO 3 Removing unwanted space caused by Margin
Edit 2 :
Your problem is a well documented problem - Matching Columns Problem. There are loads of solutions you can try, here are a few :
1) javascript
2) Alter the Image (Hacky)
3) Pure CSS
My fav => Option 2
I havnt personally explored the last one,but try it out.. :)
Hope it helps..
Related
I have a navigation bar with 4 links floated.
While width of each one is 25% of total width of NAV, height is not fixed because text of a link could be longer than others and span across 2 rows, like in this example.
#first-level-navigation .mega-link {
background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #eaeeee 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #cccccc;
padding: 0;
text-transform: uppercase;
width: 25%;
}
#first-level-navigation .mega-link a {
color: #00643c;
display: inline-block;
padding: 10px;
text-align: center;
text-decoration: none;
width: 100%;
}
I would like that height of smaller links will extend to height of taller one in case like mine, in which last link span on 2 rows if window is smaller enough. How to obtain it, withous forcing height in px? I tried with height:100% but it was unuseful
You can use display:table/table-cell:
#first-level-navigation{
display:table;
}
.mega-link{
display:table-cell;
vertical-align:middle;
}
JSFiddle
Aslo, you have to add browser prefixes for box-sizing: border-box - here's a good article about it by Paul Irish.
With jQuery(in Coffeescript):
if $('html').length > 0
link = $('.mega-link')
# Determine heights
link_height = link.height()
# Applys heights
link.css "height", link_height
# when window resizes, calculate and apply again
$(window).on 'resize', ->
# re-determine height
link_height = link.height()
# Apply heights
link.css "height", link_height
After few years, new modern CSS techniques could be used to solve this issue, using Flexbox Layout.
Starting from #Vucko's jsFiddle (proposed in its answer), I slightly modified it to use Flexbox in the following way:
#first-level-navigation{
display:flex;
}
.mega-link{
flex:1;
}
This code solve "equal heights" issue but to mantain also centered vertical alignment, is necessary to make flex also each .mega-link, so the complete code becomes the following:
#first-level-navigation{
display:flex;
}
.mega-link{
flex:1;
display:flex;
align-items:center;
}
Please, note also that Flexbox allows to avoid specific declaration of fixed width (so width:25%; can be removed, replaced in its function by flex:1;), so becomes easier change number of .mega-link elements with auto adaptation of each one.
I am working on a design with twitter bootstrap 2 (responsive). In this design, I have a header, left sidebar, content and footer.
Basically, I have the following code structure - have a look at http://jsfiddle.net/w4yh9/3/
The important section is the:
<div id="inner" class="span10">
...
</div>
Please have a look at the attached screenshot, especially the yellow marked area:
I have the following question / problem:
How can I add some padding to the right for all content elements (success message, content, table) - it should work on smaller screens as well?
I would give the parent container a padding and also apply box-sizing: border-box to it.
Check out my JSFiddle: http://jsfiddle.net/w4yh9/4/
#main {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
background: #FFF;
border-radius: 4px;
}
.span10 {
padding-right: 10px;
box-sizing: border-box;
}
You could try using
#main {padding-right:5px}
But maybe that makes #main wider than you'd like.
In that case, you could use
#main > div { width:98%; }
#main > .navbar {width:100%; }
to set all children divs of main to 98% width, and then over-ride this for the (hopefully limited number of) specific children that you want to be full-width.
I'm new to css and stuck and can't figure out what I am doing wrong. But I would like to have the foot show as three columns. If you look at the image layout and notice the footer has three columns well that's the i'm trying to achieve. Also the footer dotted lines show past the layout.
Here is my layout: http://gdisinc.com/barker/images/menubar/layout_barker.jpg
Here is the working site: http://www.gdisinc.com/barker/default.php#
Could you tell me what I have to do to fix it. Let me know if you have any questions?
The reason why the third <ul> goes down is because you have an extra 1px of border (border-right: 1px dotted #FFFFFF;).
The way you did it was having a 900px container and divide it into 3 columns. That's correct.
But once you added an extra border-right: 1px dotted #FFFFFF;, the column width become 301px (300px width + 1px border = 301px).
To solve this, either you make change the container size into 903px. Or you reduce the width size into 299px.
The other problem about
the footer dotted lines show past the layout.
Be careful with padding. When you add padding inside a div. It is counted as extra width.
Some part of your CSS for <ul> is:
width:902px;
padding:20px;
The total width is 902px (width) + 20px (left padding) + 20px (right padding) = **942px**
To fix this, you change the padding at your <ul> by using padding:20px 0px;. The first value represents top & bottom padding, the second value represents left & right padding.
2 solutions
increase width of the content
.content {
width: 903px;
}
or remove border of the last ul in content
.content ul:last-child {
border-right: 0;
}
add this css
.content {
padding:20px 0;
}
#footer ul {
margin: 0 0 0 20px;
width: 275px;
height:120px;
}
also add a class to last ul and add this
.last {
border:none;
}
better do this as suggested by Emrah
.content ul:last-child {
border-right: 0;
}
Your columns don't fit enough in a parent. Set style="border:none;" for the last column.
I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.
I can't seem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.
The layout I am working on is here, and a screencast showing the problem is here.
The easiest solution is simply to add min-width:980px to #container.
#container {
background: none repeat scroll 0 0 #A8D9A7;
height: 100%;
min-height: 100%;
position: relative;
z-index: 5;
min-width: 980px; /* add this */
}
The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.
The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.
Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.
If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.
In the #footer-left-outer { rule change:
margin-right:470px;
to:
margin-right:-490px;
In the #footer-right-outer { rule change:
margin-left:-470px;
to:
margin-left:-490px;
In the #footer { rule change:
padding: 10px 10px 10px 10px;
width: 940px;
to:
padding: 10px 30px;
width: 980px;
I now understand why you were using the outer-right and outer-left.
I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/
It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.
It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow
I'm using a large background in <body> tag and I want to make a container div with a width of 960px.
I want the container div to be positioned 15px down from the top, I guess i have to use position:absolute.
My dilemma is; the rest of the div's inside the container have to contain the same position or i could continue this like an normal 960px wide website?
Sorry for my bad english.
Please help me!
This should give your container a 960px width and center it with a 10px top (and bottom!) margin.
#container {
width: 960 px; /* set width for container */
margin: 10px auto; /* 10px top and bottom, center screen */
}
You don't have to use absolute positioning. A simple
body {margin: 0; padding: 0}
#container {width: 960px; margin: 15px 0 0;} /* or margin: 15px auto 0 */ if you want it centered
will do :)
You do not need to use position:absolute; what that does is puts a div in a specific place on the page irrleevant of broswer window size which isn't what you want in this instance,
What you need is simply a margin-top:$$px;
If you are using an id use the # identifier:
#container {
margin-top:15px;
width:960px;
}
If you are using a class use the . identifier:
.container {
margin-top:15px;
width:960px;
{
All divs within this tag can be written and position as they normally would, no extra padding or margins necessary.