Putting two ap divs on the same level

Question

The Imp 96 0 Newbie Poster

11 Years Ago

Hi guys,
I'm once again stuck on something that is probably simple to solve, but I cant figure it for the life of me!

Basically, I'm trying to make my website look as fluid as possible. I dont want it to look all boxed and hyper organised, but I want it to be well structured and laid out.

Im trying to put my logo and navigation bar on the same level, but for some reason, it seems impossible to do so!

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Buntingford Community Choir</title>
<style type="text/css"> 
<!--
body {
    font: 100% "Harlow Solid Italic", "Corbel";
    background: #666666;
    margin: 0; 
    padding: 0;
    text-align: center;
    color: #000000;
}
.wrapper #container {
    width: 1200px;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;
}
.wrapper #mainContent {
    padding: 0 20px;
    text-align: left;
}
.wrapper #logo {
    text-align: left;
}
.wrapper #navigationbar {
    text-align: right;
}
-->
</style></head>

<body class="wrapper">

<div id="container">
  <div id-"logo">
  <img src="../Imagery/Logos, banners, and other graphics/Logo.jpg" alt="" width="130" height="78" /><!-- end #logo --></div>
  <div id="navigationbar">
  <img src="../Imagery/Logos, banners, and other graphics/Navigation Bar/Navigation Bar.jpg" alt="" width="593" height="50" />
  <!-- end #navigationbar --></div>
  <div id="mainContent"> 
    <h1>My Head</h1>
    <p>Your text here</p>    
    <!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>

There is the code for it, any advice on how to do it would be highly appreciated!

Many thanks!

html-css web-design

6 Contributors
9 Replies
141 Views
21 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by The Imp 96

AleMonteiro 238 Can I pick my title?

11 Years Ago

What do you mean by "same level"? Can you post a print of what you are trying to accomplish?

JorgeM 958 Problem Solver

11 Years Ago

Also, it looks like you are using a. Image as a placehokder for the navigation div. the elements that you ultimately use will have a direct impact on the styles you use to design the layout.

JorgeM 958 Problem Solver

11 Years Ago

@The Imp 96-

With regard to your question about the navigation bar. There are many ways to build it. It could be as simple as having a few links side by side. However, you may find that many sites use a navigation bar with multiple dropdowns (levels) so that you can categorize your links fairly easy.

I have an example of a Multi-level Navigation Menu that you are free to use and adapt to your needs. It uses only CSS. However, if you do a search online, you'll find other examples of navigational menus that incorporate JavaScript and jQuery for some more advanced transitions and animations.

You had another question about floats and "clear". You first have to clearly understand how floats work. I'd suggest that you read up on this, but in short, when you float an element, you remove it from its normal flow. Other elements will wrap around the element that has had the float property applied. You can float elements to the left or right. If you do not want the next element to wrap around the float, you need to clear it. You can clear the left, right, or both floats. A clear of "both" will ensure that the next element will not wrap around a left or right float.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Octet 45 Newbie Poster Featured Poster · Answer 1 · 2013-01-14T20:24:13+00:00

If I understand correctly, you shall want to use a float.

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Buntingford Community Choir</title>
    <style type="text/css">
    <!--
    body {
    font: 100% "Harlow Solid Italic", "Corbel";
    background: #666666;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
    }
    .wrapper #container {
    width: 1200px;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;
    }
    .wrapper #mainContent {
    padding: 0 20px;
    text-align: left;
    clear: both;
    }
    .wrapper #logo {
    text-align: left;
    float: left;
    }
    .wrapper #navigationbar {
    text-align: right;
    float: right;
    }
    -->
    </style></head>
    <body class="wrapper">
    <div id="container">
    <div id="logo">
    <img src="/var/www/Assets/IMG/Public/Logo.png" alt="" width="130px" height="78"/><!-- end #logo --></div>
    <div id="navigationbar">
    <img src="/var/www/Assets/IMG/Public/Logo.png" alt="" width="593" height="50" />
    <!-- end #navigationbar --></div>
    <div id="mainContent">
    <h1>My Head</h1>
    <p>Your text here</p>
    <!-- end #mainContent --></div>
    <!-- end #container --></div>
    </body>
    </html>

What I've done is included three extra bits, float: left; float: right and clear: both; in your CSS.
I've also fixed a couple of errors, mainly you had id-"logo" instead of id = "logo"

Hope this helps!

<M/> 170 Why so serious? Featured Poster · Answer 2 · 2013-01-15T00:39:38+00:00

I am not sure if i understand what the question is asking but i am assuming that you want to place 2 divs next to each other?

LastMitch · Answer 3 · 2013-01-15T01:38:09+00:00

@The Imp 96

Basically, I'm trying to make my website look as fluid as possible.

You try this example which contain the same or similiar CSS code you have. Plus you can add or change the code in the CSS to whatever design you want.

http://www.manisheriar.com/holygrail/index.htm

The Imp 96 0 Newbie Poster · Answer 4 · 2013-01-15T07:50:51+00:00

Thank you very much for all the responses, AHarrisGsy you have solved my problem! Thank you! But I think it may be best if I understand what you have done, the float makes sense, but what is the point of the 'clear', please may you explain!

Also JorgeM - is there a better format for a navbar? If so what would it be?

Many thanks!

The Imp 96 0 Newbie Poster · Answer 5 · 2013-01-15T07:55:08+00:00

Oh and last Mitch, thank you for letting me use the CSS - the right side bar and centre column is going to be dead useful!

The Imp 96 0 Newbie Poster · Answer 6 · 2013-01-15T16:23:27+00:00

Thank you for your help!! JorgeM I will do as you say in regards to the Nav bar. I think I understand what you mean by the floats and clear, I will look further into this myself.

Once again, many thanks!