David L
Reputation: 23
CSS Div Arrangement Float Issue
I am a bit new to css and I am having trouble with getting my navigation and divs to align. I am trying to get the navigation bar to extend 60% of the way. The left div to be under the nav bar. An the right div to be 40% on the right. I would greatly appreciate any help. Thanks.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font-size: 12pt
}
.left {
float: left;
width: 60%;
background-color: #cccccc;
padding: 3px;
clear: both;
}
.right {
float: right;
height: 100%;
width: 40%;
background-color: #990000;
clear: both;
}
.right h2 {
background-color: black;
color: white;
}
/* navigation */
.nav ul {
display: inline;
background-color: #444;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
float: left;
list-style: none;
background-color: #5f5f5f;
opacity: 0.98;
line-height: 40px;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
.nav a:hover {
background-color: #000000;
}
.nav a.active {
background-color: #fff;
color: #444;
}
.navcontainer {
width: 60%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Welcome to Scribbled</title>
</head>
<body>
<!-- This is the nav bar-->
<div class="navcontainer">
<div class="nav" role="navigation">
<li><a href="#homepage">Homepage</a>
</li>
<li><a href="#first">About</a>
</li>
<li><a href="#second">Photos</a>
</li>
</div>
</div>
<!-- Left Panel -->
<div class="left">
<div id="homepage">
<h1>Homepage</h1>
</div>
<div id="first">
<h1>About</h1>
<h2>Posted by Someone on June 10, 2011 * Comments(64)* Full Article </h2>
<p>This is
<bold>Scribbled</bold>, Lorem Ipsum is simply <span style="color: red">dummy </span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="second">
<h1>Photos</h1>
<img src="images/flower.jpg" class="flower" alt="Flower">
</div>
</div>
</div>
<!-- Right Panel -->
<div class="right">
<div class="search">
<h2>
Search
</h2>
<form>
<input type="text" placeholder="enter keywords here..." required>
</form>
</div>
<div class="Aliquam tempus">
<h2>Aliquam tempus</h2>
<p>
Mauris of the printing and typesetting industry. Lorem Ipsum ha
</p>
</div>
<div class="Categories">
<h2>Categories</h2>
<p>
Alquam libero
</p>
</div>
</div>
</body>Upvotes: 2
Views: 74
Answers (3)
sinisake
Reputation: 11318
In this case, i would use different approach. display:table, could be the solution.
HTML:
<!-- This is the nav bar-->
<div class="navcontainer">
<ul>
<li><a href="#homepage">Homepage</a>
</li>
<li><a href="#first">About</a>
</li>
<li><a href="#second">Photos</a>
</li>
</ul>
</div>
<div id="content">
<!-- Left Panel -->
<div class="left">
<div id="homepage">
<h1>Homepage</h1>
</div>
<div id="first">
<h1>About</h1>
<h2>Posted by Someone on June 10, 2011 * Comments(64)* Full Article </h2>
<p>This is
<bold>Scribbled</bold>, Lorem Ipsum is simply <span style="color: red">dummy </span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="second">
<h1>Photos</h1>
<img src="images/flower.jpg" class="flower" alt="Flower">
</div>
</div>
<!-- Right Panel -->
<div class="right">
<div class="search">
<h2>
Search
</h2>
<form>
<input type="text" placeholder="enter keywords here..." required>
</form>
</div>
<div class="Aliquam tempus">
<h2>Aliquam tempus</h2>
<p>
Mauris of the printing and typesetting industry. Lorem Ipsum ha
</p>
</div>
<div class="Categories">
<h2>Categories</h2>
<p>
Alquam libero
</p>
</div>
</div>
</div>
CSS:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font-size: 12pt
}
#content {
display:table;
}
.left {
width: 60%;
background-color: #cccccc;
padding: 3px;
display:table-cell;
box-sizing:border-box;
}
.right {
display:table-cell;
box-sizing:border-box;
height: 100%;
width: 40%;
background-color: #990000;
padding:5px;
}
.right h2 {
background-color: black;
color: white;
}
/* navigation */
.navcontainer {
width: 60%;
display:table;
}
.navcontainer ul {
display:table-row;
width:100%;
background-color: #444;
text-align: center;
margin: 0;
padding: 0;
}
.navcontainer li {
display:table-cell;
list-style: none;
background-color: #5f5f5f;
opacity: 0.98;
line-height: 40px;
}
.navcontainer a {
text-decoration: none;
color: #fff;
display: block;
text-align:center;
}
.nav a:hover {
background-color: #000000;
}
.nav a.active {
background-color: #fff;
color: #444;
}
.navcontainer {
width: 60%;
display:table;
}
So, div with id #content is added as a container for left and right block... ul element is created, and one redundant div removed (also, one wrong closing div tag removed too). Now you have extended navigation and two blocks, without using of floats.
Demo: http://jsfiddle.net/Lwh1tr46/
Upvotes: 0
Oussama Elgoumri
Reputation: 617
from what i understand about your question maybe this is what are you looking for
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font-size: 12pt
}
.left {
float: left;
width: 60%;
background-color: #cccccc;
clear: both;
}
.right {
float: right;
height: 100%;
width: 40%;
background-color: #990000;
}
.left h1, .left h2, .left p {
padding-left: 5px;
padding-right: 5px;
}
.right h2 {
background-color: black;
color: white;
}
/* navigation */
.nav ul {
display: inline;
background-color: #444;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
float: left;
list-style: none;
background-color: #5f5f5f;
opacity: 0.98;
line-height: 40px;
padding-left: 10px;
padding-right: 10px;
}
.nav li:hover {
background-color: #000;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
;
.nav a.active {
background-color: #fff;
color: #444;
}
.navcontainer {
width: 60%;
height: 40px;
background-color: #5f5f5f;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Welcome to Scribbled</title>
</head>
<body>
<!-- This is the nav bar-->
<div class="navcontainer">
<div class="nav" role="navigation">
<li><a href="#homepage">Homepage</a>
</li>
<li><a href="#first">About</a>
</li>
<li><a href="#second">Photos</a>
</li>
</div>
</div>
<!-- Left Panel -->
<div class="left">
<div id="homepage">
<h1>Homepage</h1>
</div>
<div id="first">
<h1>About</h1>
<h2>Posted by Someone on June 10, 2011 * Comments(64)* Full Article </h2>
<p>This is
<bold>Scribbled</bold>, Lorem Ipsum is simply <span style="color: red">dummy </span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="second">
<h1>Photos</h1>
<img src="images/flower.jpg" class="flower" alt="Flower">
</div>
</div>
</div>
<!-- Right Panel -->
<div class="right">
<div class="search">
<h2>
Search
</h2>
<form>
<input type="text" placeholder="enter keywords here..." required>
</form>
</div>
<div class="Aliquam tempus">
<h2>Aliquam tempus</h2>
<p>
Mauris of the printing and typesetting industry. Lorem Ipsum ha
</p>
</div>
<div class="Categories">
<h2>Categories</h2>
<p>
Alquam libero
</p>
</div>
</div>
</body>You should always take seriously padding's, margin's and borders when you set the width or height with '%'
Upvotes: 0
imtheman
Reputation: 4843
Remove clear: both; from .right and add box-sizing:border-box; to both .left and .right (as @nevermind pointed out). Also, you may or not need to add display: inline-block to both.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font-size: 12pt
}
.left {
float: left;
width: 60%;
background-color: #cccccc;
padding: 3px;
clear: both;
display: inline-block;
box-sizing:border-box;
}
.right {
float: right;
height: 100%;
width: 40%;
background-color: #990000;
display: inline-block;
box-sizing:border-box;
}
.right h2 {
background-color: black;
color: white;
}
/* navigation */
.nav ul {
display: inline;
background-color: #444;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
float: left;
list-style: none;
background-color: #5f5f5f;
opacity: 0.98;
line-height: 40px;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
.nav a:hover {
background-color: #000000;
}
;
.nav a.active {
background-color: #fff;
color: #444;
}
.navcontainer {
width: 60%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Welcome to Scribbled</title>
</head>
<body>
<!-- This is the nav bar-->
<div class="navcontainer">
<div class="nav" role="navigation">
<li><a href="#homepage">Homepage</a>
</li>
<li><a href="#first">About</a>
</li>
<li><a href="#second">Photos</a>
</li>
</div>
</div>
<!-- Left Panel -->
<div class="left">
<div id="homepage">
<h1>Homepage</h1>
</div>
<div id="first">
<h1>About</h1>
<h2>Posted by Someone on June 10, 2011 * Comments(64)* Full Article </h2>
<p>This is
<bold>Scribbled</bold>, Lorem Ipsum is simply <span style="color: red">dummy </span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="second">
<h1>Photos</h1>
<img src="images/flower.jpg" class="flower" alt="Flower">
</div>
</div>
</div>
<!-- Right Panel -->
<div class="right">
<div class="search">
<h2>
Search
</h2>
<form>
<input type="text" placeholder="enter keywords here..." required>
</form>
</div>
<div class="Aliquam tempus">
<h2>Aliquam tempus</h2>
<p>
Mauris of the printing and typesetting industry. Lorem Ipsum ha
</p>
</div>
<div class="Categories">
<h2>Categories</h2>
<p>
Alquam libero
</p>
</div>
</div>
</body>Upvotes: 1