I have a 2 column layout with a bootstrap nav in the right column. The problem is that content in the right column should sit immediately below the nav, but instead is pushed down to clear the left column. The result is that my right column has a nav, then lots of vertical white space, then the content.
Here's the code:
<head>
<link href="/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css">
<style>
.left-column {
padding: 10px;
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
}
.right-column {
padding: 10px;
color: red;
border: 1px solid black;
margin-left: 320px;
}
</style>
</head>
<body>
<div class="left-column">
<p>This is the left content</p>
</div>
<div class="right-column">
<ul class="nav nav-pills">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<p>This is the right content</p>
</div>
</body>
The reason that the right content is pushed down is that the left column is floated, and bootstrap navs have an :after pseudo element with the rule clear: both;.
I have tried to find a way to do the 2 column layout without floating the left, but I need the right to take up the remaining horizontal space, and this is the only way I could do it.
I also tried:
removing the clear: both; rule, but I end up with the right content appended horizontally on to the nav
adding other pseudo elements after the nav
containing the nav in a floated block, per the notes on this mozilla page, https://developer.mozilla.org/en-US/docs/Web/CSS/clear
Any help is much appreciated.
The rules for floats apply to items within the same block formatting context. There are several ways to create a new block formatting context, per this article https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context. The option that worked best for me was to set the overflow property of the right column to auto. There is a good explanation here, https://developer.mozilla.org/en-US/docs/Web/CSS/overflow.
Related
I am able to get my dropdown navigation to stay at the top using absolute positioning, but it squishes the left side and everything at the top goes behind the navigation.
How can I get my navigation to stop overlapping everything else with the position:absolute property? My nav elements are in my CSS, so an invisible <div> won't work.
The following is the HTML in my header.php document:
<center><nav>
<ul>
<li>Home</li>
<li>Arcade
<ul>
<li>Action</li>
<li>Arcade</li>
<li>Puzzle</li>
<li>Vehicle</li>
<li>Violence</li>
<li>Defense</li>
<li>RPG</li>
</ul>
</li>
<li>Watch
<ul>
<li>TV Shows</li>
<li>Movies</li>
</ul>
</li>
<li>Extras
<ul>
<li>Reviews</li>
<li>Updates</li>
</ul>
</li>
<li>Support</li>
</ul>
</nav></center>
The following is the CSS I am using for the background color and positioning before the position is added:
nav{
background-color:#989898;
margin: 0px -12.5%;
}
Now the CSS after I add positioning:
nav{
background-color:#989898;
margin: 0px -12.5%;
position:absolute;
z-index:1000;
}
My website is www.gameshank.com/!
Any ideas? Thanks!
When using position:absolute it removes the element from the document flow. The best way to prevent position:absolute elements from overlapping other elements is to use the margin properties to your advantage.
Try adding this to your CSS (differences noted with asterisks so don't add that to the code):
nav {
background-color: #989898;
margin-left: -10%; /**** Remove other margin: 0 -12.5%; */
margin-top: -100px; /*****/
width: 100%; /****/
position: absolute;
z-index: 100;
}
#logo { /**** This is all new. You can change to a different name if you need to.*/
margin-top:100px;
}
Add this to your HTML <center> tag which immediately follows the <center> tag holding the <nav>.
<center id="logo"> ... </center>
On a different note, you should consider doing a significant rewrite of all that code. That site is using depreciated tags such as <center> and <font> for styles that CSS can handle better along side HTML5 elements such as <nav>.
I have a main element I have set to position: relative. This contains two divs that I then apply position: absolute on. This then causes the header and footer that sandwich the main element to then bump up against each other. How can I stop this?
Using floats and clearing the footer seems to give the two column layout I want. But I'm not sure how “sturdy” a solution that is and what'll happen on IE6/7.
Code on codepen.
All you elements in main are absolutely positioned, so main's height computes to zero, so the bottom edge of the header is next to the top edge of the footer. If you add a height to main you will open up space between the header and footer.
Given the following HTML:
<header>Header</header>
<main>
<div id="text">
<p>Some text</p>
</div>
<div id="links">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</main>
<footer>
<p>Footer</p>
</footer>
You can realize a two-column layout using floats as shown in the following CSS:
main {
position: relative;
height: auto;
overflow: auto;
border: 1px solid blue;
}
#text {
float: left;
width: 500px
}
#links {
float: left;
width: 400px;
}
You need to set overflow: auto on your main container to contain the floats (equivalent to clearing them).
Also, make sure that the widths of the floated element are not too wide or else they will wrap to a 2nd line if the screen size is too narrow.
See demo at http://codepen.io/anon/pen/gGsjd
Footnote: Using overflow:auto versus clear:both
I tend to use overflow: auto but in some cases the the clear property is what is needed. At some point, read up about "block formatting contexts" at http://www.w3.org/TR/CSS2/visuren.html#block-formatting The reasons to pick one approach over the other are a bit subtle and the choice depends on the details of the layout that you are trying to achieve, how it behaves in a responsive manner and so on.
I have a fluid-width left div and a fixed-width right div.
It took a while to figure out how to make this work because I am theming a jrox site and jrox will not let me change the order the columns are generated.
The HTML:
<div id="jroxHeader" class="jroxHeader"> </div>
<div id="jroxContent">
<div id="jroxRightColumn" class="jroxRightColumn"> Places to go:
<ul>
<li>First Menu</li>
<li>Second Menu</li>
<li>Third Menu</li>
</ul>
</div>
<div id="jroxMainContent" class="jroxSingleColumn">
Very little content.
</div>
</div>
The CSS:
.jroxSingleColumn{
float: left;
margin-right: 160px;
padding:0 10px;
background-color:#B6B6B4;
}
.jroxRightColumn{
float: right;
width: 160px;
margin-left: -160px;
background-color:#8E8E8C;
}
.jroxHeader{
width: 100%;
background-color:#7A7A78;
height:150px;
}
As you can see with this fiddle this looks great. It works almost perfectly. I didn't notice and issue until I came across a page with very little content in the jroxSingleColumn like in this fiddle. I need the jroxSingleColumn to fill the remaining part of the div and I need it to be cross browser compatible. I can change some of the HTML but the right column will always be in HTML first.
I am almost positive this is not a duplicate. I have read many many similar problems but none are the same.
Thanks.
remove the float:left from your jroxSingleColumn class i.e
change your css to this:
.jroxSingleColumn{
margin-right: 160px;
padding:0 10px;
background-color:#B6B6B4;
}
see this fiddle
Though I would like to suggest, there are much cleaner ways of achieving your end result.
I am trying to layout a page in three columns, I want the middle column to resize with the page but the problem is that if the page is made very narrow, the left column either slides below the middle one (if I use float to position the columns) or it overlaps it (if I use absolute positioning). I want the right column to "bump" into the middle one once that one's min width is reached and stop moving, at this point the page should start showing a horizontal scroll bar.
Following is my attempt with absolute positioning:
h2 {
margin-top: 0;
}
#leftside {
position: absolute;
left: 0;
width: 200px;
}
#rightside {
position: absolute;
right: 0;
width: 150px;
}
#content {
min-width: 200px;
margin: 0 150px 0 200px;
}
<div id="leftside">
<ul>
<li>Left Menu 1</li>
<li>Left Menu 2</li>
</ul>
</div>
<div id="rightside">
<ul>
<li>Right Item 1</li>
<li>Right Item 2</li>
</ul>
</div>
<div id="content">
<h2>Content Title</h2>
<p>Some paragraph.</p>
<h2>Another title</h2>
<p>Some other paragraph with total nonsense. Just plain old text stuffer that serves no purpose other than occupying some browser real-estate</p>
</div>
You should be able to do this using a wrapper div along with min-width and eventually overflow, such as: http://jsfiddle.net/5zsyj/
Try re-sizing the window, if the column is < 300px, it will show scroll-bars instead of just resizing the elements themselves, or floating above eachother.
A solution would be to add this to the CSS:
html {
min-width: 550px;
position: relative;
}
demo: http://jsfiddle.net/4PH4B/
The basic idea is that when the page reaches the sum of all the column's widths it should no longer shrink, instead just show the scroll bar.
Also the position: relative; declaration is there to align the third column to the right side of the html content, not just the window.
Styling li tags with float:left is a standard way to create horizontal navigation bars. But whenever I do this, the entire navigation bar list gets separated from the containing div.
Removing float:left would fix the problem, but let's assume I want to do it this way.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="temp.css" />
</head>
<body>
<div id="header">
<h2>Demo: Navigation Bar</h2>
<ul id="navbar">
<li>
News
</li>
</ul>
</div>
</body>
</html>
CSS
#header {
margin: 10px;
width: 8in;
background-color: green;
margin-left: auto; /* setting margin to auto centers block element */
margin-right: auto; /* width must not be 100% */
}
#header ul { /* ul */
list-style-type: none;
padding: 0;
margin-top: 0px;
}
#header li {
display:block;
float:left;
background-color: silver;
margin: 0;
}
Any insight is much appreciated!
Edit:
Solution is to add empty div after the list, or style the containing div with overflow:hidden.
After looking for an explanation why this happens, I found a great link explaining everything!
http://css-tricks.com/all-about-floats/
The trick is, working with float's - use clearfixes. In your case, add the following, before header closing tag </div>:
<div style="clear: both"></div>
That will make header strech, considering floating elements inside it.
Add a div after the ul with style clear:left; - I would go into more detail, but I'm on my iPad and about to go to bed.
Instead of anything in the li css code, put #header li{display: inline;} (and your color and other preferences)