CODEWITHSUNDEEP
htmlcss
Simon
Simon

Reputation: 10150

CSS Page layout - divs move on resize

I'm trying to figure out the correct way to lay out this page with css but having some trouble. The html looks like:

body {
	background-color: orange;
}

header {
	display: block;
	text-align: right;
	width: 100%;
	height: 50px;
}

.mainWrapper {
	width: 100%;
}

nav {
	border: 1px solid black;
	float: left;
	padding-top: 20px;
	width: 20%;
}

nav ul li {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	list-style-type: none;
	height: 75px;
	border: 1px solid black;
}

content {
	float: right;
	width: 65%;
	padding: 100px;
	background-color: white;
	border-radius: 10px;
	border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
<header>Title</header>
<div class="mainWrapper">
	<nav>
		<ul>
			<li>Link 1</li>
			<li>Link 2</li>
			<li>Link 3</li>
			<li>Link 4</li>
		</ul>
	</nav>
	<content>blah blah blah</content>
</div>
</body>
</html>

What I'm aiming for is a 100% width header on top. Under that on the left is a 20% wide nav menu floated left. Then immediately to the right of that nav is the main content area that takes up the remaining width of the page.

The problem is that the main content area shifts to underneath the nav menu when the browser window gets smaller. It's strange that it does this because I thought the content area would just resize itself because it is set to a % width.

Also, whats the best way to ensure that both the nav menu and the content area take up the rest of the browser space vertically? I tried setting a height:100% on them (after setting body height to 100% as well), but it extends just a little past the bottom of the page and forces a scrollbar to show up

Upvotes: 0

Views: 215

Answers (3)

sideroxylon
sideroxylon

Reputation: 4416

The problem is your padding:100px on content. This adds a fixed 200px component to the width of the element. If you want to keep the padding, change the element width to width: calc(65% - 200px); That's a lot of padding though. You'd be better adjusting the padding with media queries. 

body {
	background-color: orange;
}

header {
	display: block;
	text-align: right;
	width: 100%;
	height: 50px;
}

.mainWrapper {
	width: 100%;
}

nav {
	border: 1px solid black;
	float: left;
	padding-top: 20px;
	width: 20%;
}

nav ul li {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	list-style-type: none;
	height: 75px;
	border: 1px solid black;
}

content {
	float: right;
	width: calc(65% - 200px);
	padding: 100px;
	background-color: white;
	border-radius: 10px;
	border: 1px solid black;
}
<body>
<header>Title</header>
<div class="mainWrapper">
	<nav>
		<ul>
			<li>Link 1</li>
			<li>Link 2</li>
			<li>Link 3</li>
			<li>Link 4</li>
		</ul>
	</nav>
	<content>blah blah blah</content>
</div>

Upvotes: 1

Problem Child
Problem Child

Reputation: 585

I'm thinking what you require is for your content to appear on the right of the screen. If that's the case you need to add position:absolute; to your content block in your css.

Replace your css with this one :

body {
    background-color: orange;
}

header {
    display: block;
    text-align: right;
    width: 100%;
    height: 50px;
}

.mainWrapper {
    width: 100%;
}

nav {
    border: 1px solid black;
    float: left;
    padding-top: 20px;
    width: 20%;
}

nav ul li {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    list-style-type: none;
    height: 75px;
    border: 1px solid black;
}

content {
    float: right;
    width: 65%;
    padding: 100px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid black;
    position: absolute;
}

Upvotes: 0

Leo Gao
Leo Gao

Reputation: 629

First, the static padding cause the problem. When your browser gets smaller, you padding set on content is still 100px, so it makes your content underneath the nav menu.

I have two ideas:

  1. You can set a proper padding and set a min-width to your body.
  2. Try media query to change your style according the width.

Upvotes: 0

Related Questions