I have a layout that has a side menu bar and then the main content displayed on the right side. The layout and functionality work just fine except for one minor detail -
In some cases, there isnt enough content to fill the entire screen and when that happens the DIV containing the main content does not stretch and fill the remainder of the screen creating a visual difference as seen in the screenshot. I tried manipulating various attributes and putting in dummy content etc but could not find a clean solution. I am hoping someone can help. I am using Twitter Bootstrap 3.x
I have included the CSS for the main section, ideally, I would like this white background to fill the screen upto the footer.
/*
* Main content
*/
.main {
padding: 20px;
background-color: #fff;
border-left: 1px solid #dae3e9;
height: 100%;
box-shadow: -3px 3px 3px -2px #f1f1f3;
}
I have also created a fiddle with my code, the visual is a little messed up because the output is trapped inside a frame - but here it is anyway -
Dont use min-width: 100%; on your #wrap.
Basically solves the problem.
But i want the footer to still be at bottom etc...
Fiddle
Added:
.main::before {
content: "";
position: absolute;
z-index:-1;
display: block;
width: 100%;
margin-left: -20px;
height: 100vh;
border: 1px solid black;
background-color:white;
}
Suggestion: clean up your code. you don't need that much html code the design your doing. I't will be hell for any one who want to edit or change it at a later stage.
Related
I want to have a footer at the bottom. At first, I use position: fixed
.page-foot {
position: fixed;
bottom: 0;
width: 100%;
background: #F6F6F6;
height: 400px;
border-top: 1px solid #eee;
}
But using this way, I meet some issues such as debug on Chrome Developer Tool, I cannot see other section of html file because my footer is big.
I study their source code and see that Quora page using float as below
.page-foot {
float: left;
position: relative;
border-top: 1px solid #eee;
background: #f6f6f6;
width: 100%;
min-width: 1020px;
height: 400px;
}
Here is example image that I can debug footer with Chrome Developer Console:
And when I zoom out page, the footer still at bottom of page:
This method can solve above problem (I can scroll to another section when debugging). But the footer just stands at below of page if other content (such as header + main content) has enough space and this footer will shadow some content of main content.
I see that Quora doesn't meet this problem. Their footer always stands at bottom, and no content of main content is covered.
I want to know how can they do this ?
Thanks :)
You need to give your content area padding-top which is equal to the header's height, and padding-bottom which is equal to the footer's height.
I have a div that has a variable width, depending on its content. I want to use it for a menu bar that slides in from the side of the page when the user clicks it, so it has to stick out. I want it to stick out exactly 16px (because the arrow image has that size), no matter how wide it actually is.
How can I realize that without using JavaScript?
EDIT:
Thanks for your answers! But it came to my mind that I could do it just like I did with the navbar on that site – modify the width instead of sliding it in.
See here: http://dev.mezgrman.de/tagwall/
The easiest way to do that is to add another class to your menu item when it is collapsed and set another width there and a text indent like so (instead of write again all your css in a new class)
.collapsed {
width: 16px;
text-indent: -9999px;
background: url("/images/arrow_left.png") no-repeat scroll right center rgba(0, 0, 0, 0.85);
}
Now the only thing you have to do in javascript is to add and remove that class depending on the user's click. (You won't get rid of javascript. because css doesn't know when you click an element)
http://jsfiddle.net/LruWn/
No matter how long the .box is, it will always overlap the .container only by exactly 16px:
html:
<div class="container"><div class="box">text</div></div>
css:
.container {
position: relative;
outline: 1px solid red;
width: 100px;
height: 100px;
}
.box {
width: 70px;
position: absolute;
left: 100%;
margin-left: -16px;
outline: 1px solid black;
}
Add overflow: hidden; to .container to see how it might look like in action.
I solved my problem by modifying the width of my element now. Silly me.
Here is my site
Currently still fiddling around with design layout and there is one problem I can't quite solve.
On my header I have a red border-bottom to separate it from the main content. Likewise, on the footer I have a red top-border to do the same. Is there a way of extending the borders beyond the div (and consequently outside of the wrapper, with overflow visible) without it conflicting with the other elements? I want to configure the layout so it has more of a grid-like design.
#wrap {
width: 1000px;
background-color: #ffffff;
text-align:left;
margin: 0 auto 0 auto;
border-left: 1px solid #000000;
border-right: 1px solid #000000; }
#head{
background-color: #ffffff;
width: 1000px;
height: 159px;
border-bottom: 1px solid #ff0000; }
kind of like this?
Yes. You can set a negative margin, causing the div to extend outside of its parent, like this. (I only did the header, but you get the idea)
The solution in the fiddle uses the annoying !important to get the styling right - you might want to reorganize your CSS to get around this and make your code more maintainable, see this post.
I have a sidebar that I am trying to get sticky on my page http://r1creative.net/station22/ I have a script in the footer that changes it from static to fixed when the page gets to a certain point. Thats working fine but the problem Im having is that when it switches, it changes how the div holds the nav ribbons and they dont "hang" over the side anymore. Ive tried messing with different combinations, but nothing could keep the scroll effect, and leave the ribbons looking the same. Any help would be greatly appreciated.
Thanks
Here is an example of the sidebar I was trying to replicate http://www.apple.com/finalcutpro/all-features/#incredible-performance
Looks like the problem is with your "float right"
#navwrap {
width: 295px;
float: right; // remove
height: 679px;
background: #F3F3F3;
position: relative;
left: 27px; // Add this left positioning
z-index: 1;
padding: 20px 0 0;
box-shadow: -4px 4px 8px #444;
}
Let me know of that helps.
Your sidebar gets fixed to the left side of the page. Just add left: 28px to the element when you set its position to fixed. Better yet, set a class and just add the class with JavaScript, rather than adding each CSS element.
I have a 2 column layout that I'asked about earlier (Simple 2 column layout).
What I've noticed is that it's not the positioning of the content column on the right that's the problem, but rather it's the way the content in that column is positioned.
I've been looking for a while and I can't see where the problem is. It looks as though the content in the right column has padding on it equal to the height of the left column.
Here's my css:
#wrapper { margin-left: 100px; width: 1000px; border-left: 1px solid #bcbcc6; border-right: 1px solid #bcbcc6; border-bottom: 1px solid #bcbcc6; }
/* Main page content, puts actual content and sidebar side-by-side */
#sidebar { float: left; padding: 5px; width: 189px; border-right: 1px solid #b6bcc6; }
#content { padding: 0 !important; margin: 0 0 0 200px; width: 790px; background-color: #ff00ff; }
EDIT: To see what's actually going on, you can check out http://www.logansarchive.za.net/bad.jpg and http://www.logansarchive.za.net/firebug.jpg
I'm also going to add the page and style related files (stylesheet and images) as I have it so that you can inspect at your leisure:
http://www.logansarchive.za.net/Default.aspx
Inside your <div id="content"> you have a table with clear: both in its CSS, and then 2 divs with clear: left and clear: right on them respectively, which are breaking your floats. Removing all those clear properties in Firebug fixed it for me on your test page.
"Use Firebug" is generally not regarded a valid answer on SO, but it really is the best way to identify mystery paddings. Install it in your Firefox, right-click the element, and Firebug's Layout view will show you where it comes from.
Have you tried making #content float:right