2 divs not aligning horizontally in html/css

Question

0.00/5 (No votes)

See more:

Hi,

I want to have a bar at the top of the web page, with "Welcome, [ipaddress]" on the left and a navigation bar on the right. I've tried loads of sites and I can't get them to align properly. My HTML:

HTML

<html>
	<head>
		<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
		<META HTTP-EQUIV="Expires" CONTENT="-1">
		<link rel="stylesheet" href="index.css">
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="http://www.codehelper.io/api/ips/?js"></script>
		<script>
			$(function(){
				GetIPAddress();
			});
			function GetIPAddress(){
				$("#username").html("Welcome, " + codehelper_ip.IP);
			}
		</script>
	</head>
	<body>
		<div class="topbar">
			<div id="username">
				USERNAME
			</div>
			<div class="navigation">
				<div class="nav">
					link1
				</div>
				<div class="nav">
					link2
				</div>
			</div>
		</div>
		<div class="titlebox">
			<div class="title">
				TITLE
			</div>
		</div>
		<div class="subtitle">
			SUBTITLE
		</div>
	</body>
</html>

CSS:

CSS

html, body{
	background-color: #000000;
	color: #FFFFFF;
	margin: 0px;
	font-size: 12px;
	min-width: 1300px;
}

div.topbar{
	background-color: #0F0F0F;
	width: 100%;
	height: 40px;
	padding-left: 10px;
	line-height: 40px;
	box-shadow: 0 5px 5px -2px #000000;
}

div.username{
	float: left;
	width: 50px;
}

div.navigation{
	float: left;
	width: 70%;
}

div.titlebox{
	margin: 10px;
	float: center;
	text-align: center;
	border: 2px solid #FFFFFF;
	box-shadow: 0px 0px 10px 5px #CCCCCC inset;
}

div.title{
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 20px;
}

div.subtitle{
	padding-left: 20px;
	font-size: 16px;
}

Please tell me how to do this because it's so simple but my hard drive broke and I can't get the code I used before off of it!

Posted 11-Aug-14 4:24am

Rixterz123

Add a Solution

2 solutions

Solution 2

There were numerous errors in your code, you were having one major error in your code, that was selector for ID was being confused with the selector of class.

CSS

div#username { }

was to be used and you were not using the hash sign which would have accessed the element with that ID. Secondly, using 50px width isnot enough, use it to be 200px atleast.

Second thing was that you were not using the float right property to align the elements on the right side, I have used the following code for the nagivation and it floated the element to the right,

CSS

.navigation {
   float: right;
}

One more thing is that why are you trying to select each element and appending the div to it? When you don't have any other element with the very same class or id?

Instead of using the following code

CSS

div.navigation{
   float: right;
   width: 70%;
}

..this code is enough,

CSS

#navigation{ /* # selects ID that is why I changed it */
    float: right;
    width: 70%;
}

You need to be doing this, if you're having multiple elements with same classname.

The list would have been better if you used something like this, because Unordered List item is a better navigation control, rather than using div elements.

HTML

<ul>
   <li>First Item</li>
   <li>Second Item</li>
</ul>

I would definitely forward you to the MDN (Mozilla Developer Network) to learn some new stuff about HTML and CSS. You can learn more resources there and you can find some articles about aligning the content, to right and left and so on.

Somehow, here is the fiddle that I have created for you: [^], have a look at it, watch it, edit it and see what happens.

Need something else? Feel free to comment and reply!

Posted 11-Aug-14 5:21am

Afzaal Ahmad Zeeshan

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Trung Nguyen Son · Accepted Answer · 2014-08-11T04:51:00

Solution 1

You cannot use div.username!
Change some of your style to this:

C#

div#username 
{
    float: left;
    width: 200px;
}

div.navigation {
    float: left;
    width: 70%;
}
div.nav {
    float: left;
}

Hope this help!

Posted 11-Aug-14 4:51am

Trung Nguyen Son

Comments

[no name] 11-Aug-14 10:58am

Works brilliantly, thanks