Im quite new to twitter bootstrap, i try to do 2 column layout
Here is my code:
<div class="container">
<div class="row">
<div class="span3 well">Content</div>
<div class="span9 well">Content</div>
</div>
<div>
Unfortunately the second column has been push to bottom of column 1
Jsfiddle
Making the container of the column to row-fluid seems to fix the issue, but according to the bootstrap manual, u need a div container having the class container-fluid
I want to make fix layout, so i dont want to make container behave as fluid container.
Is there a way to fix this?
If you are using row, you will need to place the
wells inside the span3 and span9 divs.
<div class="container">
<div class="row">
<div class="span3">
<div class="well">Content</div>
</div>
<div class="span9">
<div class="well">Content</div>
</div>
</div>
<div>
As they are of a fixed width when used within a
normal row, adding any padding or borders to the span divs will
cause them to wrap.
Alternatively you may wish to amend the bootstrap css itself, either by taking into account the borders and reducing the margin accordingly, or changing the box-sizing property, as per Twitter Bootstrap - borders. Bear in mind that box-sizing doesn't work with some browsers, e.g. IE7.
In Twitter Bootstrap, .well class have padding, and that gives extra width to content of span classes.
Solution is:
.well {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
http://jsfiddle.net/uAs6k/305/
Related
I have 2 divs I want to exactly overlap horizontally using negative margin-left.
HTML:
<div id=one></div>
<div id=two></div>
CSS:
body{margin:0px;padding:0px,border:0px}
#one {width:100px;height:100px;background-color:red;}
#two {width:100px;height: 50px;background-color:blue;}
#one,#two{display:inline-block;}
#two{margin-left:-100px;}
Before negative margin each div is 100px wide:
After negative margin the divs are 4px from overlapping exactly:
Why does setting a negative margin on the second div not cause it to exactly overlap the first div?
BTW, I'm just experimenting with margin-left...I know I can absolutely position the 2 divs inside a relative wrapper.
Thanks in advance for any enlightenment!
Inline elements are sensitive to their structure in your HTML. Since both divs are separated by a line break, they have a small "margin" between them like letters in a sentence would (which is pretty much the point of inline elements).
<div id=one></div> <!-- Here -->
<div id=two></div>
Change the structure of your HTML to remove this space:
<div id=one></div><div id=two></div>
Or you can use comments to negate the line break:
<div id=one></div><!--
--><div id=two></div>
Inline block has weird "bug" you could call it, that applies a 4px space between elements assuming a default font-size. This is created from the line-break between your div's. You'll find that you can fix this quite simply by making your negative higher.
margin-left: -104px;
This will fix your issue, but it's also not the only way to fix it.
You could do this... Instead of:
<div id=one></div>
<div id=two></div>
Delete the line-break between the div's so they are this:
<div id=one></div><div id=two></div>
This will also fix the issue.
You could alternatively set the font-size of their containing element to 0.
HTML:
<div class="container">
<div id=one></div>
<div id=two></div>
</div>
CSS:
.container { font-size: 0; }
But wait! There is more. You could comment out the line-break.
<div id=one></div><!--
--><div id=two></div>
You could drop the ending > to the beginning of the next element.
<div id=one></div
><div id=two></div>
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
<div class="internal-wrapper row-fluid">
<div class="Header span12">
<div class="HeaderTitle span6"></div>
<div class="span6"></div>
</div>
</div>
Now, when I do padding on internal-wrapper, I am expecting the padding to effect on the entire grid! inside it. But an overflow is occurring (I think, the right padding is not working)
.internal-wrapper {
padding-left: 30px;
padding-right: 30px;
}
The blue bar below represents Header class. The green box, represents padding! So, Its happening on left but not right
.row-fluid is 100% width. Because it's using a border-box layout, any padding you put is added to that 100%. See http://paulirish.com/2012/box-sizing-border-box-ftw/. However, setting it to use the content-box model will probably cause other problems in Bootstrap.
How to fix it - add an inner element with the padding.
<div class="row-fluid">
<div style="padding-left: 30px; padding-right: 30px;">
...
</div>
</div>
I can't see (or discern) from your post what's wrong, but here's my guess: By placing padding on an element that Bootstrap sizes, you've altered its width. Try putting margin on .Header instead.
If this doesn't help, please create a demo: http://jsfiddle.net/
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/
The code goes:
<div id="wrapper">
<div id="content">
<!-- content -->
</div>
<div id="sidebar">
<!-- sidebar -->
</div>
</div>
I apply a background-color to wrapper, but it does not show unless I set a fixed height. Why does it do that considering content and sidebar are filling wrapper? What other ways are there to get the background-color to appear without setting a fixed height?
As someone said in the comments, if their were floated (which they are), then apply overflow: hidden (which worked).
What other ways are there to get the
background-color to appear without
setting a fixed height?
Float #wrapper
Use a clearfix.
Make sure you have content :)
Make sure #wrapper is display:block or inline-block
Add padding
One way to check, besides Firebug, is set border:1px solid red, and see if you get a 2px line or if you see the border as you would expect. If you see the normal border, there is another problem: time to post your CSS.
Here's a quick-and-dirty clearfix you can try for now, see if this helps:
<div id="wrapper">
<div id="content">
<!-- content -->
</div>
<div id="sidebar">
<!-- sidebar -->
</div>
<br style="display:block;clear:both;width:100%" />
</div>