0

I've been trying to create a website but the div tags aren't seeming to go as planned. For the banner div, logo div and main navigation system div, they are perfectly in line where I want them, but when I try to position the subnavbar and the search bar, they go in a weird position? I can't see what I've done wrong with my code, it all seems okay.

Basically for the subnav bar I want it underneath the logo div, and then for the search div, I want this slightly under the main navigation system. The code is below to make things easier, Thanks in advance!

http://jsfiddle.net/xyDt2/

I believe here is the code I am having problems with:

html

<div id="SubNavBar">
<a id="LaptopsOver" href="#" class="left" > </a>
<a id="NetbooksOver" href="#" class="left" ></a>
<a id="TabletsOver" href="#" class="left" ></a>
<a id="eRaaderOver" href="#" class="left" ></a>
</div>

css 

#SubNavBar {
border: 3px solid #000;
margin-right: auto;
margin-left: auto;
height: 209px;
width: 100px;
left: auto;
right: auto;
}
Improve this question
10
  • 4
    Please post your relevant code here along with your fiddle. Also, please try to follow the site guidelines and not circumvent them. There is a reason you can't post a jsfiddle link unless there is code in your question... Commented Jan 9, 2014 at 22:14
  • It's all on jsfiddle, It's just the subnavbar div + the searchbar div Commented Jan 9, 2014 at 22:15
  • Wasn't aware of that, I didn't see the problem with it, thought it would be easier, sorry about that sir. Commented Jan 9, 2014 at 22:16
  • Yeah just erase the space and will work Commented Jan 9, 2014 at 22:17
  • 1
    "Basically for the subnav bar I want it underneath the logo div".. Currently you have deliberately (?) centered your subnav bar, so obviously it will not be underneath your logo, which is on the left. You have set 'left: auto' and 'right: auto', which basically centers the element. Do you have a wireframe (image) of how you want your site to look like? Commented Jan 9, 2014 at 22:25

4 Answers 4

Reset to default
1

When you float all the elements inside a div, the height of that div collapses to zero and the element that follows it is at the mercy of the floated sub-elements.

The quickest way to fix this, add overflow: auto to the container(s):

#Banner, #SearchBar, #SubNavBar {
    overflow: auto;
}

http://jsfiddle.net/mblase75/xyDt2/6/

A more comprehensive solution is to add a clearfix to each of the container divs, but overflow:auto should be sufficient for modern browsers.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Not really the type of thing I'm looking for though, I don't like them scroll boxes on the website, thanks for your reply though :)
1

Your markup on the fiddle was missing a close brace after the #eReaderOver:hover

what was:

#eReaderOver:hover
{ 
background: url("Images/SubNavBarOver_04.gif");

should be:

#eReaderOver:hover
{ 
background: url("Images/SubNavBarOver_04.gif");
}

And you were missing a semicolon after the position line in that fiddle as well:

so what was:

#SearchBar {
position: relative
margin-right: auto;
margin-left: auto;
height: 30px;
width: 900px;
top: auto;
left: auto;
right: auto;
 }

should be:

#SearchBar {
 position: relative;
margin-right: auto;
margin-left: auto;
height: 30px;
width: 900px;
top: auto;
left: auto;
right: auto;
 }
Improve this answer

1 Comment

Hey, thanks for pointing that out, my searchbar works now, that must have been a big part of the error, I still can't fix the positioning of the subnavbar though, any suggestions? Thanks again
0

What about this fiddle (sample part below)

#SearchBar {
position: absolute;
/*margin-right: auto;
margin-left: auto;*/
margin:auto;
height: 30px;
width: 900px;
/*top: auto;
left: auto;
right: auto;*/

}

Look at the commented out css.

Edit: In the final version I also added a wrapper to contain everything and I removed the empty <p></p> to remove the white line above the subnav.

Margin-right and margin-left: auto can be shortened to margin:auto; Also no need for positioning and left, top, bottom properties. float and position:absolute don't work together.

Improve this answer

4 Comments

Thanks, your comment helped a lot, the searchbar is now in the position I want it, I'm still having problems with my subnavbar though, any suggestions? Thanks :)
Yeah like that, apart from I want it so when you zoom in/out on the website, the search bar and subnav stay in position
Glad I could be of help, I clarified my answer to better indicate the changed parts.
Yeah thanks for that, I've got a much better understanding of the margin's etc too now which is of good use, and the wrapper idea kind of was the main solve to my issue, thanks :)
0

because you use tag for make your background! it cause push another divs to the bottom. i think all you need is like this:

<div id="Banner">
 <div id="Logo"></div>
   <div id="NavBar">  
     <a id="ReviewsOver" href="#" class="Right" ></a>
     <a id="ContactOver" href="#" class="Right" ></a>
     <a id="ShopOver" href="Shop.php" class="Right" ></a>
     <a id="HomeOver" href="Index.php" class="Right" ></a>
   </div>
</div>

<div id="SearchBar">
  <form action="./Results.php" method="get" class="Right"> 
    <input type="text" name="input" size="50" style="border:3px solid #000" />
    <input type="submit" value="Search" />
  </form> 
</div>

<div id="SubNavBar">
  <a id="LaptopsOver" href="#" class="left"> </a>
  <a id="NetbooksOver" href="#" class="left"></a>
  <a id="TabletsOver" href="#" class="left"></a>
  <a id="eRaaderOver" href="#" class="left"></a>
</div>

and make your CSS like this:

#Banner {
border: 5px solid #000;
margin-right: auto;
margin-left: auto;
height: 100px;
width: 900px;
left: auto;
right: auto;
    background: url('images/Banner.gif') top right no-repeat;
}
#Logo {
border: 2px solid #000;
height: 150px;
width: 150px;
left: auto;
top: auto;
right: auto;
    background: url('images/logo.gif') top right no-repeat;
    float: left; /* if you want to put logo in left of banner, else write right */
}
#SearchBar {
position: relative
margin-right: auto;
margin-left: auto;
height: 30px;
width: 900px;
top: auto;
left: auto;
right: auto;
    float: right;
}
#SubNavBar {
    border: 3px solid #000;
margin-right: auto;
margin-left: auto;
height: 209px;
width: 100px;
left: auto;
right: auto;
    float: left;
}

you can floating your objects in the page by "float" atribute in css, try it!

Improve this answer

1 Comment

I gave this a go, doesn't really work properly as the logo over-laps my banner etc, and the navbar has some how now gone to a weird location, Thanks for your help though, Appreciated! :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.