Is there an easy way to make a full width hero type banner using bootstrap and WordPress? I know how to do it with bootstrap and I know how to hack WordPress Templates, the problem lies when you are wanting to this within the WordPress content editor(Perhaps via short-code even).
So, if using a template in wordpress that is say 1100 px wide, but the screen is 1300px wide, simple adding a div with a background color will only extend the width of the containing element which is 1100 px wide.
How can I add a fullwidth banner anywhere in the code with any sized containing element without breaking bootstrap rules?
You could use position: absolute to break free from the containing div.
Then use left: 0px; width: 100% to use the full width of the browser.
Then, wrap your hero inside that. So:
<div style="position: absolute; left: 0px; width: 100%;">
<div class="hero-unit">
<h1>Heading</h1>
<p>etc.</p>
</div>
</div>
The problem you'll experience with this is that subsequent content will ignore this new div with regards to vertical-positioning.
A hack to that would be to add block-level content with the proper height adjustment (matching the height of your absolute-positioned div), e.g.
<div style="height:500px"></div>
I've just created some articles in an HTML5 file. Those articles contain images. The articles also have a border at the bottom.
Now I have this problem that whenever you re-size your window to make it larger, the images go outside the border. I want the border to re-size with the image.
Here's an example of how an article looks like in my page:
<article>
<p>
<img image />
</p>
<p>
text
</p>
</article>
The p-tag with the image inside floats left, the p-tag with text floats right next to it.
To be more clear: I want the article tag to resize to the height of the image.
Just guessing, without seeing a working example or any of your CSS, but adding overflow: auto to the article element will cause it to contain its floated children:
article {
overflow: auto;
}
Example that may or may not relate to the CSS we can't see: http://codepen.io/paulroub/pen/opnfG
I'm having problems avoiding my sidebar to overlap the main content of my blog on tumblr. I am using a premade template on tumblr which i have modified. The only ways I can position my sidebar in the top right corner, is by using an absolute or fixed position:
#sidebar{
position:fixed;
top:20px;
right:20px;
}
When using e.g. relative, the sidebar position itself in the bottom after my main content.
My page is built up like this:
<body>
<div id="page">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
</body>
Click here to see the page.
I tried putting my sidebar inside the page div, but there's a constraint on the width, which I would like to keep. Thank you in advance.
According to your latest comment, this should help your problem:
You could just set a min-width on your page, rearrange your markup a little, and remove some styles on the sidebar. If you leave everything like it is now, then the following will help:
Set min-width: 1250px; on your body tag
Move the sidebar element to before the page element
Remove position: fixed; from the sidebar element
This will prevent the menu from overlapping the page content and will add a horizontal scrollbar to the page when the user's window is less than 1250px. If you want to support a smaller min-width or if you have a problem with the background image becoming not centered at small resolutions, then minor modifications will be necessary.
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.
Thanks for you're help.
You can view this online
The problem is my footer. It won't seem to stay below the content. I attempted to use Matthew James Taylor's method which is not working for me. I need the footer to stay below the content when the content fills the page, and stay at the bottom of the window when the content does not fill the page (sticky footer). I'm seeking a non-JS solution.
Thanks again.
put an empty div element at the end of .container element with clear:both; like this
<div style="clear:both;"></div>
And remove height from #tabs element. you have set it as height: 500px;