I have a problem because in my code i have an header with padding(left & right at 8%), but on the content box i dont have padding, and when i reduce the firefox window the content box have not the same width than the header (because padding on the header change this).
So I want to the box content have always the same width than the header, and keep dimensions of the slidebar.
in the content right of the slide bar, I have tried to put the same padding but that does not change because the contentbox have a defined width.
This is a code example:
<header>
<div id="logo"></div>
</header>
<div id="box">
<div id="slidebar"></div>
<div id="content"></div>
</div>
thats the JSFIDDLE :
https://jsfiddle.net/t2h839dt/
(if you reduce the preview window on JSFIDDLE, you see the problem (not same width for header and box content).
Your code seems partially responsive. First of all you should decide which approach you are going to do? either fixed or responsive layout.
Please try the below link is for fixed layout.
[jsfiddle][1]
[1]: https://jsfiddle.net/antonysuthakarj/hLsaotco/
Related
I have written some markup for a navigation bar on my webpage, now I am trying to move onto the next section, and I noticed when I was adding another section it doesn't expand the full width: image here
I added a white background to that section, and the body's background is black. Here's some markup and CSS:
HTML Sample:
<header>
<div class="container">
<!-- fun markup here -->
</div>
</header>
<section id="work">
<div class="container"></div>
</section>
CSS Sample
section#work {
padding: 100px 0;
background-color: white;
}
I believe I have left out all irrelevant information, but if I did leave out something important that you also need, please let me know.
The simple answer here is to use container-fluid.
Please check this fiddle: https://jsfiddle.net/ya6z789x/1/
As you can see the first container class (simply container) has a set width of 1170px at larger viewports, 970px at slightly smaller and so on (it reduces as you reduce viewport size).
The second example, container-fluid, is set to 100% width of its parent. Meaning if your header element doesn't have a width defined, the container-fluid class will stretch to the full width of the window.
Alternatively, if your header element had a width of say 900px (third example), placing a container-fluid directly as a child of it will make the container-fluid element have a width of 900px. Note, you may need to expand the viewport of the fiddle to see this in action.
I have this page with a fixed nabber on top (using default bootstrap navbar).
The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.
What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.
Does anyone have an idea of how to fix it?
With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.
Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.
further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)
You can either place a div that is 50px high over the content you want to scroll to, then anchor to that:
Link
<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>
JSFiddle Demo
Or, give the content div a padding-top, or margin-top of the height of the nav bar:
Link
<div id="link" class="content">
Content Here...
</div>
CSS:
.content{
padding-top:50px;
}
JSFiddle Demo
I'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.
I'm trying to make an our team page using bootstrap but I can't get the footer to act right. At first it was not filling the width of the page, now (I'm not so sure what I did) this problem is solved but it is overlapping onto the content: some thumnails, writing, and a link. The page with the problem is: http://rdtaxsavers.com/new/OurTeam.php
My css file is at rdtaxsavers.com/new/css/bootstrap.css
You'll notice that the rdtaxsavers.com site footer works fine. Thanks in advance!
EDIT: I got it back to where the footer is not overlapping but now the width issue is back. You will see in my css that my modal-footer class has width:100%; at the end of it but this does not fix the issue.
EDIT: This is driving me nuts. When I fix the width problem then it overlaps, when I fix the overlap the width is broken.
I think you are placing the footer inside the Container class, the container class has a width of 1170px. therefore the footer will not be 100% width to the body. move the footer out of container class. or you have to change the width of container class.
this is what you have:
<div class="container">
<div class="row">...</div>
<footer>...</footer>
</div>
try to do this:
<div class="container">
<div class="row">...</div>
</div>
<footer>...</footer>
Try clearing the float:left in the ul.thumbnails element.
how would you make a footer container follow directly after the content and then stretch to the bottom of the page?
The setup is:
header-container is fixed 150px height
content-container stretches with whatever content should be inside
footer-container follows stretches for the remainder of the page.
So far I either have the footer directly after content with white space following, or a footer stuck to the bottom with white space between the content and the footer
The actual styling can vary depending on whether you are sure your page will never by long enough to scroll. You can often use the body tag itself for this trick, but it is less flexible and not recommended.
The idea here is to create a very long footer div, and have it be contained by the element which contains the rest of your content. Since the overflow of the parent is hidden, the actual length of the div will be ignored.
This is often shown with a counter-balancing bottom padding, but in your case that shouldn't be needed.
<style>
html,body,.bigDiv{height:100%}
.header{height:150px}
.footer{height:2000px; background-color:green;}
</style>
<div class="bigDiv" style="overflow:hidden;">
<div class="header"></div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>