Please, look at this sample template: http://jsfiddle.net/D8cye/2/
As you can see, the navbar expands to the bottom of the sidebar. Why? How can I avoid this?
I know I can workaround this by setting .navbar-inner{height:40px;}. But I feel that I'm doing something wrong of perhaps I have misunderstood something with the fluid grid.
Forked it here http://jsfiddle.net/Astraldiva/r6tHv/.
I think that one of the important things to consider while using twitter bootstraps fluid layout is not to have items with fixed width or the layout will brake. Not sure if this helps but I just rearranged the containers and placed the content in span8 + span4 divs to get similar layout like you wanted and this version should work on different screen sizes.
<div class=row-fluid>
<div class=span8>
<div id=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class=navbar>
<div class=navbar-inner>
<ul class=nav>
<li class=active><a href=#>Home</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
</ul>
</div>
</div>
</div>
<div class=span4>
<div class=box></div>
<div class=box></div>
<div class=box></div>
</div>
</div>
EDIT
To get the wanted layout Peter made an extension on my idea in this fiddle.
There is a 2 column layout, a fixed with sidebar and fluid content area (with max and min width). So it's not completely fluid but solves the problem.
<div id=container>
<!-- Sidebar is floated right and has fixed width -->
<div id=side>
<div class=box></div>
<div class=box></div>
<div class=box></div>
</div>
<!-- Content wrapper is in normal flow with margin-right of at least the width of a sidebar-->
<div id=main>
<div class=row-fluid>
<div class=span12>
<div id=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class=navbar>
<div class=navbar-inner>
<ul class=nav>
<li class=active><a href=#>Home</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#container {
border: 1px solid #f00;
max-width: 600px;
min-width: 300px;
}
#side {
float: right;
width: 100px;
border: 1px solid #0f0;
}
#main {
margin-right: 108px;
border: 1px solid #00f;
}
#text {
padding: 8px; margin: 8px; border: 1px solid #888;
}
.box {
height: 80px;
margin-bottom: 8px;
background: #ddd;
}
Note: twitter bootstrap css included.
Hope it helps.
Use display: inline-block; for .navbar-inner like this Demo
Explanation: using display: inline-block; won't take up the extra space which your navigation bar was using before, horizontally as well as vertically... :)
CSS
.navbar-inner {
display: inline-block;
}
Edit: If you want your navigation menu to be 100% of width than do it like this
Demo 2
CSS
.navbar-inner {
overflow: hidden;
}
Related
I gonna try to make a list of element float and clear both at the next new row because height of box are unknown and we can hide box to highlight box by category, like:
$('nav a').on('click', function(e) {
e.preventDefault();
var show = $(this).data('show');
if(show == 'all') {
$('div').show();
} else {
$('div').hide();
$('.' + show).show();
}
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
article {
width: 400px;
}
div {
width: 100px;
border: 1px solid black;
float: left;
padding: 10px;
margin-bottom: 10px;
}
.category-b {
background-color: #eee;
}
div:nth-child(4n+5) {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<a data-show="all" href="#">All</a> /
<a data-show="category-a" href="#">Category A</a> /
<a data-show="category-b" href="#">Category B</a>
</nav>
<article>
<div class="category-b">hello</div>
<div class="category-a">hello world folk</div>
<div class="category-a">lorem ipsum dolores</div>
<div class="category-a">bonjour Mr</div>
<div class="category-b">Katarina vs Alistar</div>
<div class="category-a">hello</div>
<div class="category-a">hello world folk</div>
<div class="category-b">lorem ipsum dolores</div>
<div class="category-b">bonjour Mr</div>
<div class="category-a">Katarina vs Alistar</div>
<div class="category-b">hello</div>
<div class="category-b">hello world folk</div>
<div class="category-b">lorem ipsum dolores</div>
<div class="category-a">bonjour Mr</div>
<div class="category-a">Katarina vs Alistar</div>
<div class="category-a">hello</div>
<div class="category-b">hello world folk</div>
<div class="category-b">lorem ipsum dolores</div>
<div class="category-a">bonjour Mr</div>
<div class="category-b">Katarina vs Alistar</div>
</article>
http://jsfiddle.net/Pik_at/Lwyte7sm/
The problem are, when you select an category the nth-child also takes into account the hidden box by display:none and broke the mosaic.
Would anyone have a solution? Css solution will be appreciated.
Quickest CSS solution:
Set a fixed height for each DIV, then float left without clear:both.
div { height:80px; }
DEMO
Or, you can use jquery to get the highest height for all DIVs and float left to get the same result.
/====================================================/
How about use display:inline-block; instead of float:left; ?
DEMO 2
*The width % might need to decrease as display:inline-block; generates some space between the DIVs.
I am using Bootstrap to create a responsive web page. I need to add a padding-left and padding-right to the body to always have a 50px wide >empty safety area< on each side.
Problem: When I resize the viewport, the content of container overflow on the right.
Is there a simple way how to achieve this effect? I only tried the following one, but it doesn't look very good (the container is too narrow in the end).
// container responsivity fix
.container {
.container-fixed();
#media (min-width: #screen-sm-min) {
width: calc(~'#{container-sm} - 100px');
}
#media (min-width: #screen-md-min) {
width: calc(~'#{container-md} - 80px');
}
#media (min-width: #screen-lg-min) {
width: calc(~'#{container-lg} - 100px');
}
}
HTML structure:
<header>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<a href="#">
LOGO
</a>
</div>
<div class="col-xs-12 col-sm-5">
<h2>Lorem ipsum dolor sit amet, <strong> consectetur adipiscing elit.</strong> </h2>
</div>
<div class="col-xs-12 col-sm-3 text-right">
<i class="flag cz active">A</i>
<i class="flag uk">B</i>
<i class="flag ge">C</i>
</div>
</div>
</div>
</header>
Fiddle: http://jsfiddle.net/o5bkpv7c/
The text is not stretchy so it won't fit inside the header past a certain breakpoint. I usually use break word or just size the text down or use fitText.js. There's cleaner ways of doing this.
DEMO: http://jsfiddle.net/o5bkpv7c/4/
body {
padding: 0 20px;
}
header {
background: lightblue;
padding: 1em 0;
}
header h2 {font-size:1.2rem;margin:10px 0;}
.flag {
width: 29px;
height: 20px;
display: inline-block;
background: red;
}
#media (min-width:768px) {
header h2 {font-size:1.3rem;margin:0;}
}
Also, see the layout you are going for, I wouldn't use the grid system for it. Here's a cleaner way.
http://jsbin.com/tuyeta/1/edit
Is there a way to clear the bottom of an image? I tried margin-bottom: 100%, and padding-bottom: 100%, but it is not working because I have more divs below which clears all.
I want to clear only the content of the image containing div.
HTML
<div class="contentpart">
<p>
<a href="http://www.s1waterbike.ro/wp-content/uploads/2013/07/contact-feat1.jpg">
<img class="alignnone size-medium wp-image-88" alt="contact-feat" src="http://www.s1waterbike.ro/wp-content/uploads/2013/07/contact-feat1-300x200.jpg" height="200" width="300">
</a>
</p>
the text....
</div>
<div class="contentpart">
The text.....
</div>
CSS
.contentpart img {
float: left;
clear: bottom;
}
Example of how the solution should look like
Based on your image, you can realize the layout by using the the following HTML:
<div class="contentpart">
<a href="#">
<img src="http://placehold.it/300x200">
</a>
Donec adipiscing, lorem non euismod venenatis...
</div>
and applying the following CSS rules:
.contentpart {
border: 1px dotted gray;
display: table;
}
.contentpart a {
display: table-cell;
vertical-align: top;
padding-right: 20px;
}
You can see the demo at: http://jsfiddle.net/audetwebdesign/wknjA/
How This Works
You can use CSS tables to get the text to stay in a single column without wrapping it in a block element.
Apply display: table to the parent block and display: table-cell to the a tag.
You can have some control over white space by applying some padding to the a element.
I have floated two elements right in the header of my website which are <div id="twitter"> and <div id ="navbar>, but there appearance becomes skewed when I view them in IE6 and IE7. I believe that I either need to clear the floated elements or apply a clearfix but I am unsure as to where.
here is an image of the issue in IE6 and IE7:
This is the desired result as it would appear in modern browsers.
Here is a link to the web page: http://www.bestcastleintown.co.uk/pg/
CSS:
#twitter {
background: red;
float: right;
height: 40px;
margin-bottom: 40px;
width: 200px;
}
#navbar {
font-size: 2.2em;
float:right;
}
HTML:
<div id="main_header">
<div id="inner_main_header">
<div>
<div id="main_logo">
<div class="home_page_logo left">
<img src="PG_awards_logo.gif">
</div>
</div>
<div>
<div id ="twitter" class="padall">
Follow us
</div>
<div id ="navbar" class="right">
<ul class="nav NG">
<li>home</li>
<li>enter</li>
<li>categories</li>
<li>judging</li>
<li>sponsorship</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Change #navbar style to this:
#navbar{
font-size: 2.2em;
float: right;
width: 60%;
overflow: auto;
}
Just give the #navbar some width and overflow other than visible.
I'm looking for a solution, to position a div-element (with a fixed width) near to a text, like in this example:
What is the most common solution by using CSS ?
I would do it something like this:
http://jsfiddle.net/Xfmdr/
.column { display: table-cell; }
.column:nth-of-type(1) { vertical-align: middle; }
#green { background: green; padding: 30px; margin: 10px;}
<div id="container">
<div id="left" class="column">
<div id="green">div</div>
</div>
<div id="right" class="column" >
<p>Lorem Ipsum </p>
</div>
</div>
For reference, vertically aligning stuff is a pain in the nuts in CSS. See this very useful article on why I chose to display as table-cell for this use case. http://phrogz.net/css/vertical-align/index.html