<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/
Related
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
Here's an example of my code:
http://jsfiddle.net/9ECkE/1/
HTML
<div class="wrapper">
<div class="sidebar">
<ul>
<li>
test
</li>
<li>
test
</li>
<li>
test
</li>
</ul>
</div>
<div class="content">
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
</div>
</div>
CSS
.box{float:left; padding:20px; border:1px solid red;}
.three{clear:left;}
.sidebar{float:left;}
I have tried adding float:left to .content{} however, that only works when the screen is wide, for mobile displays the full content area ends up going below the sidebar. If I try using span7 (bootstrap, width: 58%), then it doesn't work for wide screen.
Is there another way I can set the arrangement without needing to set the width?
The problem you are having with float is due to the height of your first left float. There is enough height on the left float to prevent box 1 and 2 from falling below it but not box 3. There are two ways to prevent this. You can add artificial height to .sidebar with height: 300px; or something like that. Or you can use a more common practice and use left and right floats. So your .sidebar would be float: left; and your .content would be float: right;. If you choose to go with different floats you should declare the width for each say .sidebar would have a width: 30%; and .content would have a width: 70%;. You can play around with the percentages for the widths they are there to help format the page style. If you use borders you will have to change the percentages to accommodate them.
Clear your content class
as like this
.content{overflow:hidden;}
Demo
-------------------------
Option two
and define your content class
float left
as like this
.content{float:left;}
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/
I really need your help on this one:
Right now I have divs just on top of each other, filled dynamically with diverse contents so the heights are changing.
What I want to do now is to place them in 2 rows. With a fixed width and "float:left" this kinda works already.
My english is not the very best so pls take a look at my example picture first:
As you can see there is this whitespace because of the third div which doesn't start right beneath the first div because of div number 2 which CAN BE higher as the first div.
I now wonder if there is a possibility to automatically position those divs higher so that there is no whitespace (they always should start right beneath the picture which is above wouth the whitespace, left or right).
LIKE THIS:
I hope you kinda understand what I mean :D Thanks in advance for replys!
EDIT:
Code-Example:
<div id="content">
<div class="xyz">BLABLA</div>
<div class="xyz">BLABLA<br>morebla!<br>EVEN MORE BLA</div>
<div class="xyz">BLABLA</div>
</div>
<style>
#content {
width: 648px;
}
.xyz {
width: 303px;
float: left;
border:1px solid black;
}
</style>
Remeber, heights are always different!
jQuery masonry makes your life a lot easier.. don't reinvent the wheel, especially when you're facing a classic css problem.
this will do it...
<div id="content">
<div class="column1" id="left">
<div id="div1">...</div>
<div id="div3">...</div>
</div>
<div class="column2" id="left">
<div id="div2">...</div>
<div id="div4">...</div>
</div>
</div>
Then just style column2 styles by defining widht values in your css.
Thanks,
#leo.
I'm getting some strange whitespace between two divs I have.
Each div has the css property display: inline-block and each have a set height and width.
I cannot find where the whitespace is.
Here is a Fiddle
You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.
You have:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div>
<div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
Change for:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div><div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
However, this is a bad way to do what you want to do.
You should float the elements if thats what you want to do.
Use:
float:left;
clear:none;
In both div
If you want to retain your coding layout, avoid floats and keep each div on it's own line entirely...
<div id="leftSide">Some content here</div><!--
--><div id="rightSide">Some more content here</div>
Only add this to your CSS
h1 {
padding:0;
margin:0;
}
Space between div is only due to h1 Margin and Padding
This does the trick:
<div id="left_side">
...
</div><div id="right_side">
...
</div>
Notice how the right-side div starts immediately after the closing tag of the left-side div. This works because any space between the elements, since they are now inline, would become a space in the layout itself. You can mirror this behavior with two span elements.
Demo.
You can also add display: flex; to the divs' parent container (in this case, body). Fiddle.
best way is settings parent element's font-size to 0 then normal font-size to child elements inside that parent (otherwise inherits zero from parent)
Floated both of the elements left, also made the 30% width into 40% to fill all the space, but this isn't necessary. Please be aware, "inline-block" isn't supported by IE7 but can be fixed with a workaround.
http://jsfiddle.net/RVAQp/3/
Move these statements onto the same line:
</div><div id="right_side">
Tried using float instead of "inline-block", no problems. Just changed the display:inline-block to:
#left_side {float: left;}
and
#right_side {float: right; margin-right: 10%}
No apparent problems. Could be wrong.
Don't know why but I resolved this problem by adding border: 1px solid red;(vertical) and float: left;(horizontal) to related DIV style statement and white-spaces removed.
Parent div set to font-size: 0px and chiilds to wanted size like 17px :)