Positioning a Navigation Bar

HTML & CSS
1

Need some help positioning a Navigation Bar that I stole from another part of my website.

(Boy is my CSS getting rusty!!) :blush:

It should still be floated to the far right, and still below the Subsection heading, however I want it to take up an entire row so that the Article Summary stays below it!

Here is a screenshot with arrows showing the changes I want…

And here should be the relevant code…


	<!-- MIDDLE COLUMN -->
	<div id="pageMidCol_2">

		<!-- ARTICLE LISTING -->
		<div id="boxSubsectionIndex">
			<h2>Economy</h2>

			<!-- New Navigation Bar -->
			<ul id='navigation'>
				<li><span>< Prev</span></li>
				<li><strong>1</strong></li>
				:
				:
				<li><a class='nav' href='/'>Next ></a></li>
			</ul>
			<div class='articleSummary'>



/* New Style */
div#boxSubsectionIndex ul#navigation {
    clear: both;
    display: block;
}


ul#navigation {
    display: inline-block;
    float: right;
    font-size: 1em;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align: center;
}


.articleSummary {
    margin: 30px 0;
    overflow: hidden;
    padding: 0 8em;
}

Sincerely,

Debbie

2

If you mean you just want articleSummary under the navbar i a new line the set it to clear:both.


.articleSummary {clear:both}
3

Okay that solved one issue.

My next issue is that I will be adding a drop-down box so people can choose how they want to sort things. The drop-down and my Nav Bar should be tied together, so I wrapped them in a new DIV like this…


	<div id='subsectionBar'>
		<ul id='navigation'>
			<!-- NAV STUFF HERE -->
		</ul>
	</div>



div#subsectionBar {
    display: block;
    padding: 0.5em 0;
}


div#boxSubsectionIndex ul#navigation {
    clear: both;
    display: block;
}

ul#navigation {
    display: inline-block;
    float: right;
    font-size: 1em;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    and so on...
}

The problem is that the DIV has no height - even with Padding.

Since my Nav is floated, I thought clear:both would solve the issue, but it doesn’t work.

Here is what I am seeing…

Sincerely,

Debbie

4 

div#subsectionBar {
    outline:1px solid magenta;    /* TEST */
    background-color:#fef;    /* TEST */
    display: block;
    [color=blue]overflow:hidden;    /* add me */[/color]
    padding: 0.5em 0;
}
5

Nope, that didn’t do it.

This is very frustrating, combined with the fact that I have admittedly lost my CSS skills over the last year or two.

It sure looks like a float issue, but I thought adding this would fix things…


div#boxSubsectionIndex ul#navigation{
	display: block;
	clear: both;
}

Sincerely,

Debbie

6

Hi Debbie,

You will need to post working snippets as its hard for use to guess exactly the structure you are going for. Looking at the code I end up with a working example like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#subsectionBar {
	background:#fef;
	margin:0 0 30px;
	zoom:1.0;
	clear: both;
}
#subsectionBar:after {
	content:" ";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}
ul#navigation {
	float: right;
	font-size: 1em;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
ul#navigation li { display:inline }
.articleSummary {
	margin: 30px 0;
	overflow: hidden;
	padding: 0 8em;
}
.articleSummary { clear:both }
</style>
</head>

<body>
<!-- MIDDLE COLUMN -->
<div id="pageMidCol_2">
<!-- ARTICLE LISTING -->
<div id="boxSubsectionIndex">
		<h2>Economy</h2>
		<div id='subsectionBar'> 
				<!-- New Navigation Bar -->
				<ul id='navigation'>
						<li><span>< Prev</span></li>
						<li><strong>1</strong></li>
						<li><a class='nav' href='/'>Next ></a></li>
				</ul>
		</div>
</div>
<div class='articleSummary'>Article summary</div>
</body>
</html>

If you can correct the above and post your code in the same format so that we can copy,paste and run you will get much quicker and better answers :slight_smile:

I couldn’t actually work out where you were putting the dropdown as there didn’t seem to be any code for it. Also note that float and display:inline-block are mutually exclusive and display:nline-block is ignored when float is present.

7

Thanks for trying to help.

My website exceeds my expectations so far, but if there is on area that is a nightmare, it is my CSS. (It has grown into a monster one cannot fathom!!)

I have spent the last 30 minutes copying & pasting CSS from FireBug, but there is no way I can recreate this page without giving you all of my code which I am unwilling to do.

Here is the best I could come up with… (Hope it is enough to help trouble-shoot.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<!-- ################## DEBBIE ##################### -->
	<!-- HTML Metadata -->
	<title>Tax Season Subsection</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />


	<!-- Page Stylesheets -->
	<style>
html, body {
    height: 100%;
}
html, body, div, form, fieldset, caption, h1, h2, h3, h4, h5, h6, hr, ul, li, ol, ul, dl, dt, dd, br, table, tr, td, th, p, img {
    margin: 0;
    padding: 0;
}


body:before {
    content: "";
    float: left;
    height: 100%;
    margin-top: -32767px;
    width: 0;
}
body {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-family: Helvetica,Arial,Sans-Serif;
    font-size: 0.9em;
    font-weight: normal;
    line-height: 1.4em;
}


.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
#pageWrapper {
    margin: -50px auto 0;
    max-width: 1200px;
    min-height: 100%;
    min-width: 842px;
    position: relative;
    z-index: 0;
}
.clearfix {
    display: block;
}
.clearfix {
    display: inline-block;
}


#pageInner {
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 0;
}


#pageBody_Subsection{
    margin: 10px 0 0;
}
#pageBody_Subsection{
    margin: 25px 0 0;
    position: relative;
    width: 100%;
    z-index: 2;
}


#pageBody_Subsection #breadcrumb{
    padding: 0 0 25px;
}
p#breadcrumb {
    padding: 0;
}
p {
    padding: 0 0 1em;
}


#pageMidCol_2 {
    float: left;
    margin-right: -200px;
    position: relative;
    width: 100%;
    z-index: 2;
}


#boxSubsectionIndex {
    border: 1px solid #CFCFD4;
    clear: both;
    margin: 0 220px 50px 0;
    max-width: 858px;
    min-width: 520px;
    padding: 0 50px 70px;
    text-align: justify;
}
#boxSubsectionIndex{
    border: 1px solid #AAAAAA;
    border-radius: 6px;
    margin: 0 0 20px;
    padding: 0 15px 15px;
}


div#subsectionBar {
    display: block;
    padding: 0.5em 0;
}


div#boxSubsectionIndex ul#navigation {
    clear: both;
    display: block;
}
ul#navigation {
    display: inline-block;
    float: right;
    font-size: 1em;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align: center;
}
ul {
    list-style: none inside none;
}


ul#navigation li {
    display: inline-block;
    vertical-align: middle;
}


.articleSummary {
    clear: both;
    margin: 30px 0;
    overflow: hidden;
    padding: 0 8em;
}


.articleSummary h3 {
    font-size: 1.2em;
    padding: 0;
}



	</style>
</head>

<body>
	<div id="pageWrapper" class="clearfix">
		<div id="pageInner">
			<!-- BODY HEADER -->
			
			<!-- PAGE BODY --><!-- 2013-05-29 -->
			<div id="pageBody_Subsection">

				<!-- BREADCRUMB -->
				<p id='breadcrumb'><a href='/'>Home</a> > <a href='/finance/'>Finance</a> > Tax Season</p>
				<!-- MIDDLE COLUMN -->
				<div id="pageMidCol_2">

					<!-- ARTICLE LISTING -->
					<div id="boxSubsectionIndex">
						<h2>Tax Season</h2>
						<div id='subsectionBar'>
							<ul id='navigation'>
								<li><span>< Prev</span></li>
								<li><strong>1</strong></li>
								<li><a href=''>2</a></li>
								<li><a href=''>3</a></li>
								<li><a class='nav' href=''>Next ></a></li>
							</ul>
						</div>

						<div class='articleSummary'>
							<h3><a href=''>Be Sure to Charge Sales Tax Online</a></h3>
							<a href=''><img src="/images/InternetSalesTax_100x100.png" width="100" alt="" title="" /></a>
							<div class='date'>Published: May 27, 2013</div>
							<p>The days of the Internet being a tax-free haven are all but over.  Make sure you consult your Tax Professional before selling things online.</p>
						</div>
					</div><!-- End of ARTICLE LISTING -->
				</div><!-- End of #MIDDLE -->

			</div><!-- End of #PAGE BODY -->

		</div><!-- End of #INNER -->
	</div><!-- End of #WRAPPER -->

</body>
</html>

BTW, I didn’t add the drop-down box yet.

What I was hoping for was a simple wrapper DIV around the drop-down box and my Nav bar like this…


Sort By: <<drop-down here>>  <<Nav Bar here>>

The Drop-down and Nav Bar should still be floated to the right.

Follow me?

Sincerely,

Debbie

8

Hi,

The answer l=to the subsectionbar not conatining the floated navigation is the same answer that Ron and I have been giving and you need to contain the floated nav.

e.g.


div#subsectionBar {
    display: block;
    padding: 0.5em 0;
   background:red;/* for testing */
  zoom:1.0;/* for ie7 and under */
}
/* float contain mechanism */
div#subsectionBar:after{
	content:".";
	clear:both;
	height:0;
	display:block;
	visibility:hidden;	
}

Regarding the drop down you want at the right of the nav is that select element dropdown or are you doing a css menu dropdown? Either way all you need to to is float the element to the right before the html for the ul.

e.g.


div#boxSubsectionIndex ul#navigation {clear:none}
.drop {float:right}



<div id='subsectionBar'>
		<div class="drop">Select element goes here</div>
		<ul id='navigation'>
				<li><span>< Prev</span></li>
				<li><strong>1</strong></li>
				<li><a href=''>2</a></li>
				<li><a href=''>3</a></li>
				<li><a class='nav' href=''>Next ></a></li>
		</ul>
</div>
9

Ron didn’t say anything about that.

Sorry, I haven’t worked with this solution since my early days on SitePoint.

I vaguely remember how it works now.

Good catch, and thanks!!

Sincerely,

Debbie

10

The solution Ron gave in post #4 was addressing the same issue but using overflow:hidden to contain the floats. It would do the same job as the :after method I gave but may have the drawback of not letting your dropdown show depending on how it was placed. :slight_smile:

11

Actually I tried Ron’s code and it didn’t work for me. Of course, I know my CSS has grown very messy.

Anyways, after trying your code, things seem to be working, so THANKS to both of you for trying to help! :slight_smile:

Sincerely,

Debbie

12