At the moment I am doing the following to get a div stretch across the complete width:
<div class="container-fluid banner">
<div class="container">
<div class="row">
<div class="span12">
<img src="image.png">
</div>
</div>
</div>
</div>
In my example, I'm wrapping the content in a container-fluid to force the content to stretch to full width.
As far as I know, Bootstrap doesn't provide a better and easier way to stretch content to full width and my approach has some disadvantages. Are there better ways to accomplish this?
if you use some css reset so you have to look what you have done there with body tag, after that as it was said before use
.container {width: 100%}
You can change the container styles if you wish.
.container {width: 100%}
You would have to make other changes, of course; but whatever is done in CSS can be undone (well, almost everything).
Related
I'm getting into Flexbox now, trying to see how I can transition from using the traditional CSS grids.
I have two layouts: One made with a CSS grid. The other one made using Flexbox. The basic layout for both examples is quite basic: A header, a nav, a content section and the footer.
Design-wise they both look the same and behave exactly the same for RWD. However, in order for me to accomplish the same behavior using Flexbox I had to create a wrapper div around the Nav and the Content sections.
This is the HTML used with the CSS grid layout:
<div class="container-12 clear">
<header class="grid-12">Header</header>
<nav class="grid-4">Nav</nav>
<section class="grid-8">Content</section>
<footer class="grid-12">Footer</footer>
</div>
This is the HTML used with the Flexbox layout:
<div class="main-container">
<header>Header</header>
<div class="site-content">
<nav>Nav</nav>
<section>Content</section>
</div>
<footer>Footer</footer>
</div>
Notice the <div class="site-content"> around the nav and section elements.
So my question is: Is the <div class="site-content"> around the nav and section elements necessary in order to accomplish that layout using Flexbox?
I'm trying to achieve the same layout with the same HTML but different CSS techniques.
Here are the demos:
Basic Layout Using a CSS Grid
Basic Layout Using Flexbox
Thanks for any guidance on this.
The answer is simple: Yes, that extra wrapper is required.
I was able to find this article in Smashing Magazine from 2011 By Richard Shepherd where confirms that sometimes an extra wrapping container is needed in order to treat the child elements with Flexbox. Granted, his article uses the old 2009 syntax, but still, the case applies:
Using flexbox often requires an extra div or two, because the parent of any flexbox element needs to have display set to box. Before, you could get away with the following:
<div style="float: left; width: 250px;"> Content here </div>
<div style="float: right; width: 250px;"> Content here </div>
Now with flexbox, you’ll need:
<div style="display: box">
<div style="width: 250px"> Content here </div>
<div style="width: 250px"> Content here </div>
</div>
Many of you have already turned away, insulted by this extra mark-up that is purely for presentation. That’s understandable. But here’s the thing: once you master the CSS, this extra containing div becomes a small price to pay. Indeed, you’ll often already have a containing element (not necessarily a div) to add display: box to, so there won’t be a trade-off at all.
Extract taken from CSS3 Flexible Box Layout Explained
Thanks.
my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
What is required to make links in bootstrap grids work throughout all the media breakpoints ?
In my case, the links work only as long as the grid is not stacked.
This is what the grid looks like:
<div class="row">
<div class="col-md-6">
<a href="#" class="room" style="height: 155.60px; width: calc(25.0% - 4px);"> <span>Item 1</span>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-12">
<p>This is another row</p>
</div>
</div>
</div>
</div>
The working fiddle is here:
http://jsfiddle.net/pTw2j/8/
Edit Thanks for the fast answer. I chose overflow:hidden; at the end to avoid scrollbars while still fixing the issue.
The problem is that the links are floated, resulting in a height of 0 for the parent .storey container.
Setting overflow: auto on the container will fix the problem.
http://jsfiddle.net/pTw2j/13/
.storey {
overflow: auto;
}
This is referred to as "clearfixing." If you're interested in learning more, here are two good articles:
CSS Tricks: Force Element to Self-Clear its Children
David Walsh: CSS Clear Fix
I had the same problem. In my case a better solution was to add the class of "clearfix" to the containing div. Bootstrap has this class built in so you don't have to do anything with your CSS.
Adding overflow:auto will result in a horizontal scroll bar. Best to use clearfix class which resolves the issue.
I'm using the 960 Grid System on this page where I list my instapaper bookmarks: http://labs.tonyhue.com/bookmarks/
However, the social media section is set off from the rest. It should be aligned to the right following the programming section. Any ideas?
Add a (fixed) height to your .grid_6-Container.
.grid_6 {height:250px; /*or something else*/}
Your Problem occurs on floated elements with different height.
Nice reading about floatings: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Edit:
Otherwise you could add a wrapper element to clear your floats:
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
You can clear your floats with .wrapper {overflow:hidden;} OR you can use the clearfix method: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
I'm trying to code a layout somewhat similar to SO.
It has a centered container with typical blocks: header, navigation, content area and footer. This blocks have different background-color. The problem is, I want the background to be 100% of the screen width.
You can see this in SO's userbar at the top of the screen.
Also I made an example picture. Note, that there shouldn't be any vertical borders, they're just to show the content area.
I've checked SO's html source but it didn't tell me anything
So, what are my options?
My first idea was to make a wrapper div for each section which handles the background, and another content div inside of it with width:950px and margin:0 auto
But it seems to me very inefficient.
Is there a nicer way to make it?
I've ended up with this structure:
<body>
<div id="header">
<div id="logo-container" class="wrap">
<div>...</div>
</div>
<div id="navigation" class="wrap">
<div>...</div>
</div>
</div>
...
<body>
and the style looks like
#... {
background:#...
}
.wrap div {
width:950px;
margin:0 auto;
}
Thanks everyone.
What I do in cases like that is style the html or body with the main background color (the one for your content), then keep the header and footer out of the main wrapper and size down their contents as needed, so I'd end up with something like so (which I think is similar to what you're saying you did, but with a couple minor differences):
<body style="background: #000;">
<div id="header" style="width: 100%; background: #666;">
<div id="nav" style="width: 100%; background: #999;">
<ul class="navigation" style="width: 950px; margin: 0 auto;">
</ul>
</div>
</div>
<div id="contentWrap" style="width: 950px; margin: 0 auto;">
Whatever content stuff, other divs, etc.
</div>
<div id="footer" style="width: 100%; background: #999;">
</div>
</body>
You don't really need extra wrappers if you have only a couple block level elements in your header and footer, so you end up with about the same number of divs as if you had them all in one wrapper. You can also keep their sizes in sync if you put them in one CSS call with the size. It might sacrifice a little bit in the way of CSS efficiency, but in my experience, it's a small enough trade off that it's not worth losing sleep over, since either the site is small enough that it doesn't matter, or large enough that there are better efficiency increases in places like the images, javascript, and server-side code.