Im trying to create a three column layout with a fluid center and fixed sides. Here's a jsfiddle. It seems as though the clearfixes for the nav is pushing the main content below the sidebars. Without the clearfixes, the content in general begins to be displayed incorrectly. Anyone know how to fix this?
Define your .nav-tabs div as inline-block to contain it within its boundaries properly, like so:
.nav-tabs {
display: inline-block;
width:100%;
}
demo: http://jsfiddle.net/6vPqA/15/show/
edit: http://jsfiddle.net/6vPqA/15/
edit: added width so the menu will adapt better.
Specifying a height for the nav class seems to pull the content up between the sidebars.
Something like:
.nav {height:50px}
Related
I am having difficulties making the vertical navigation menu to go all the way down to the footer of the page. I tried fiddling with it, but the closest i got is me setting a specific height for the .navbar, and that doesn't help me, since I want it to be responsive.
.navbar {
border: 0px;
text-align: center;
border-radius: 0px;
background-color: #F2E9E1;
}
I am guessing it has something to do with the navbar class.
Here is the entire code: https://jsfiddle.net/u3hf1jht/1/
I'm not sure what you mean by you wanting it to go all the way down to the footer? You could just set the height of the nav to 100% of the page height, if you want it to fill your entire page.
ul.nav {
height:100vh;
}
Just had a glance at your snippet of code, it seems you've stacked in navs into navbars, they are two different components in Bootstrap. I'd take another look at http://getbootstrap.com/components/#nav.
Additionally take a look at http://getbootstrap.com/javascript/#affix for positioning your navigation. The actual bootstrap side navigation is a visible example of this in action.
We've got an odd request from a client. They want a particular <ul>'s content to be centered with the icons. Centering isn't a problem in and of itself, neither are the icons.
The issue is that I can't find a way to center the <li>s at a variable width without the icon being left aligned.
So we're trying to achieve something like you see in http://jsfiddle.net/MBEKW/, with the exception that the icons should float normally to the left of the <li>, as it would if it were left-aligned.
Any ideas on how to achieve this? FWIW, we are using TWBS 2.1.1, but this seems so vanilla that bootstrap shouldn't even be a factor.
You should add this
li {
border: 1px dotted green;
list-style-position: inside;
}
jsfiddle
OR you can do the image icon like this
http://jsfiddle.net/MBEKW/3/
I am trying to position a footer under #cont, but inside the #container.
I tried making it so that when there is more content in #content, it would keep the footer inside the div, and allow me to scroll the page, but I got lost. Any idea how I should do it?
http://jsfiddle.net/a9jv7/
As you can see, more content will push it down(because it's not inside the other div, but if it's not inside, I can't set the footer to always be on the bottom of the page)
You can change the floating elements to display: inline-block, so you have more control over them and the container will adapt to their height.
#footer {
background-color:#FFA500;
text-align:center;
max-width:960px;
width: 100%;
}
The example: http://jsfiddle.net/frapporti/TPbCG/
EDIT:
In general, I'd really like to advice you against the use of floating elements for layout, as they were pushed beyond they original intended use from the very beginning, and now we have flex who does magic :)
http://html5hub.com/after-float/
http://jsfiddle.net/Cerebrl/ZkQnD/
If I understood what you want to achieve correctly, than this is one way to do it:
http://jsfiddle.net/a9jv7/1/
On #container add:
border-bottom:30px solid transparent; // used to add spacing bottom
margin-bottom:-30px; // used to add spacing bottom
overflow:hidden; // to give the container height, because it has none since the elements inside it are float-ed; (google clear-float).
I have a UL element containing 4 icons within a div that is using absolute positioning to pull it to the bottom of the screen. That div is contained within a fixed sidebar.
I have used display: inline on the list items to give me a horizontal list.
Here is my code running on bootply to demonstrate the problem I'm having. The 4 icons are offset to the right slightly when they should be central:
http://bootply.com/76539
Other content put in the sidebar has no issues with being central. It's just this list.
I have tried quite a lot of methods of trying to get the icons central within the sidebar and none of them seem to be working. I have tried inline-block and float:left on the list items and seem to be getting the same result.
Can anyone see the mistake here? I'm sure there's something simple I've missed.
#social-icons ul {
list-style: none;
margin: 0;
padding: 0;
}
Also you wrote text-align: c instead of text-align: center
I also edited your example: link
I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.