I asked a question yesterday with a similar issue however it would appear that I needed to do more leg-work. So thats what I did!
I have my basic 3 column layout (all be it, not exactly how I wanted it. The left and right columns are fluid and not fixed widths).
The issue is that the "row-fluid" DIV won't occupy the whole width of the screen or it's parent container which does stretch the width.
EDIT
The left and right columns are all sitting perfectly with the fixed width however now the centre column won't fill up to the right hand column.
HTML:
<div class="container-full">
<div class="navbar navbar-static-top">
<div class="navbar-inner blue-bg">
<img src="images/kab/logo-header.png" alt="KAB Logo Large"/>
</div>
</div>
<div class="container-full">
<div class="row">
<div class="span1 blue-bg" style="width: 150px;">
<h4>Left Column</h4>
</div>
<div class="span10">
<h4>Center Content</h4>
</div>
<div class="span1 right blue-bg" style="width: 150px;">
<h4>Right Column</h4>
</div>
</div>
</div>
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner blue-bg" style="height: 77px;"> </div>
</div>
</div>
CSS:
.container-full {
margin: 0 auto;
width: 100%;
}
.full {
margin: 0 auto;
width: 100%;
}
EDIT: Code updated to reflect changes.
Solved! Sadly, I had to edit the bootstrap.css as it was always setting the margin-left regardless of what I did. I'm sure there is a way round this.
The solution below allows for a fixed - fluid - fixed 3 column layout
HTML:
<div class="container-full">
<div class="row">
<div class="span1" style="width: 150px;">
<h4>Left</h4>
</div>
<div class="span10 filler">
<h4>Center Content</h4>
</div>
<div class="span1" style="width: 150px;">
<h4>Right</h4>
</div>
</div>
</div>
CSS:
.filler {
width: -moz-calc(100% - 300px); /* Firefox */
width: -webkit-calc(100% - 300px); /* WebKit */
width: -o-calc(100% - 300px); /* Opera */
width: calc(100% - 300px); /* Standard */
}
The -300px value is equal to the sum of the fixed column widths, in this case 150px each.
Now, on bootstrap.css goto line 282 ([class*="span"]) and change the margin-left from 20px to 0px.
Thats it! Worked for me. I must note that this only works with CSS3 due to the calc used in the CSS.
With Bootstrap 2.x you don't need the class "container-full".
Bootstrap 2.x has the class "container-fluid" for fluid layouts (full width).
You can combine "container-fluid" and "row-fluid" for the expected outcome.
<body>
<div class = "container-fluid">
<div class = "row-fluid">
<div class="span1" style ="width: 150px;">
<h4>Left</h4>
</div>
<div class="span10">
<h4>Center Content</h4>
</div>
<div class="span1" style="width: 150px;">
<h4>Right</h4>
</div>
</div>
</div>
See more: http://getbootstrap.com/2.3.2/scaffolding.html#layouts
Related
How to create an element in the Bootstrap that will normally equalize on one side (form left side) and 100% of the width on the other?
.maksymalnaszerokosc {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
<div class="container-fluid">
<div class="row maksymalnaszerokosc">
<div class="col-sm-6">text 1</div>
<div class="col-sm-6">text 2 </div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">nice same line text 1</div>
<div class="col-sm-6">Full width to right</div>
</div>
</div>
See this image how to must work
First, you must add class to that "full width to the right" column div, and then give it a position:absolute; right:0%; in the css,
Bootply: http://www.bootply.com/ukGiye0V6Y
Hope that helps, Cheerio!
I'm trying to create a 3-column layout entirely of DIVs but I have difficulty.
If I used tables the old HTML 4 way, I can do this:
<div style="width:100%">
<table width="50%" align="center">
<tr>
<td align="left">
<img src="whatever.jpg">
</td>
<td align="center">
1 2 3
</td>
<td align="right">
<img src="whateverright.jpg">
</td>
</tr>
</table>
</div>
And the nice thing is the table spans 50% and the table is centered. Here's what I tried in DIV:
<div style="width:100%;overflow:hidden;">
<div>
<div style="float:left;">
<img src="whatever.jpg">
</div>
<div>1 2 3</div>
<div style="float:right;">
<img src="whateverright.jpg">
</div>
</div>
</div>
The only way I could do it is if I know the total size in pixels or em's of all elements in the inner div, then I could set the width of it and center it, but here's the problem.
The images I use are from sprites and the sizes are expressed in pixels.
The middle text I use are numbers of large size.
The size of the text is adjusted based on user's screen resolution.
Specifying text size in pixels will cause people with the wrong size monitor to have a problem reading the numbers. I'm creating an advanced pagination system.
Is there a way I can center a div of 3-columns inside another div without requiring the sum of the inner div width?
I tried only adding margin:auto to the main div inside the outer div without success.
And remember,
The inner columns of the inside div do render correctly for me as I like it. It's just the matter of centering the whole thing nicely inside the larger div is an issue. And I'm looking for a solution that can work with IE7.
I think it will solve your problem
HTML
<div style="width:100%;overflow:hidden;">
<div>
<div class="div" style="">
<img src="whatever.jpg">
</div>
<div class="div2">1 2 3</div>
<div class="div3">
<img src="whateverright.jpg">
</div>
</div>
CSS
div .div,.div2,.div3{
width: calc(100% - 66.666666%);
/* Firefox */
width: -moz-calc(100% - 66.666666%);
/* WebKit */
width: -webkit-calc(100% - 66.666666%);
/* Opera */
width: -o-calc(100% - 66.666666%);
width: expression(100% - 66.666666%);
display: inline-block;
}
.div{
float:left;
background:purple;
}
.div2{
float:right;
background:red;
}
.div3{
background:blue;
}
Ok, you have to use display properties accordingly.
.table{
width: 500px;
}
.row{
width: inherit;
display: block;
}
.cell{
width: 33.3%;
height: 50px;
display: inline-block;
vertical-align: top;
text-align: center;
margin: 0px -2.5px;
border: 1px solid #C0C0C0;
}
<div class='table'>
<div class='row'>
<div class='cell'>
<img src="whatever.jpg">
</div>
<div class='cell'>1 2 3</div>
<div class='cell'>
<img src="whateverright.jpg">
</div>
</div>
<div class='row'>
<div class='cell'>
<img src="whatever.jpg">
</div>
<div class='cell'>1 2 3</div>
<div class='cell'>
<img src="whateverright.jpg">
</div>
</div>
</div>
Well it turned out that the real answer for me was to float each inner container and specify a percentage of width for each inner container and have the widths add up to be the width of the outer container and each inner container must have something. For example:
<div style="width:100%;overflow:hidden">
<div style="float:left;width:20%">
some text at left
</div>
<div style="float:left;width:60%">
some text in middle
</div>
<div style="float:left;width:20%">
some text at right
</div>
</div>
I'm using bootstrap to display a set of sm-4 divs. Each of these includes a panel, which header contains an image. These images got variable sizes,however, I would like to get these columns to share the same height. Is it possible ?
So far, this is the html
<div class="row">
<a href="/app_dev.php/fly/50" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/AAT3.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Falaise - Dieppe</h4>
<p>3 places</p>
</div>
</div>
</div>
</a>
<a href="/app_dev.php/fly/48" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/BE36.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Bordeaux - Toulouse</h4>
<p>1 place</p>
</div>
</div>
</div>
</a>
<a href="/app_dev.php/fly/46" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/DA20.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Flers - Pontoise</h4>
<p>1 place</p>
</div>
</div>
</div>
</a>
</div>
Here's the CSS (This is what I tried so far)
.flycard
{
text-align: left;
}
// EDIT : ADD THIS TO SOLVE THE PROBLEM
.planepi
{
max-height: 200px;
min-height: 200px;
overflow: hidden;
height: 100%;
width: 100%;
}
.planepi img
{
max-width:100%;
max-height:100%;
}
And, here's the result
CSS Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding, font-size, border-width, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted for some CSS properties, negative lengths are allowed
There are two types of length units: relative and absolute.
w3schools css units
.planepi {
min-height: 30vh;
height: 30vh;
max-height: 30vh;
overflow: hidden;
}
vh Relative to 1% of the height of the viewport
For anyone with the same problem, you need to specify the max-height of the div that holds the image:
.planepi {
max-height: 200px; //this is the max height you want
overflow: hidden; //everything that goes bellow 200px will be hidden
}
Of course it is easier for you to prepare the images to be in the same height, but this will work.
Code here - http://jsfiddle.net/Cd2Ek/
html -
<div id="main-div" style="height: 250px; margin-left: 10px;">
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small>L1</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div class="">33%</div> <div class="d1" val="1" style="height: 33%"></div>
<div class=""><small>L3</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div>67%</div> <div class="d1" val="2" style="height: 67%"></div>
<div class=""><small>L5</small></div>
</div>
</div>
If you see the output in jsfiddle, the bars are going below the main-div. I think you can guess the actual requirement, all bars should be position from bottom, and if the % is 50, then frm bottom, bar should be upto 50% height of the main div, along with label, % indication.
I think this is what you need - fiddle. I've rearranged your code quite a lot to simplify how it works, but basically it uses absolute positioning to get the bars to stick to the bottom. Please let me know if anything is unclear.
Each bar now uses the HTML:
<div class="bar-container">
<div class="bar" style="height:50%">
<span class="percentage">50%</span>
<span class="label">L1</span>
</div>
</div>
Change your css with below one
.sub-div {
margin-right: 6%;
display: inline-block;
height: 250px;
border: 1px solid green;
**vertical-align:top;**
}
Try above code...
CSS
You missed aligning the bars add this line in you .sub-div css class
vertical-align: top;
DEMO
i am trying to reduce the the width of slider using boot strap responsive css to display it in iphone
but i am not able to do it
can you please help me with it
http://jsfiddle.net/CXkQp/4/
screenshot
https://docs.google.com/file/d/0B3IBJKENGE7RQkk1eEI3TDNoN2c/edit
providing my code below
<div id="banner" class="clearfix" style="border-bottom: 2px solid #cacaca;">
<div class="bx-wrapper" style="width:100%; position:relative; margin-top: 0px; margin-bottom: 0px;">
<div class="bx-window" style="position:relative; overflow:hidden; width:100%">
<div class="container">
<div id="da-slider" class="da-slider" style="margin-top: 0px; margin-bottom: 0px; height: 300px; background-position: 247950% 0%;">
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate1A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate1B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate2A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate2B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-fromright da-slide-current" style="width: 100%;">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate3A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate3B.jpg" alt="image01"></div>
</div>
<nav class="da-arrows" style="width: 100%">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
<nav class="da-dots"><span class=""></span><span class=""></span><span class="da-dots-current"></span></nav></div>
</div>
</div>
</div>
</div>
A couple of points to get you started. In your jsFiddle, there doesn't seem to be a closing tag for your container div # line 120.
Also you want your slider to scale but it's not inside a fluid row div. I think your bootstrap grid needs work. Check the structure for fluid grid carefully: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
Hope this helps.