Member Avatar for WigglesMcMuffin

I'm trying to create a website, and I'm currently having a little CSS trouble with getting the website to flow and respond well to resizing and different screen sizes.

Currently I have posted it at:

Anyway, if you go there you may notice that 1) my content section doesn't quite reach the right edge, or it displaces itself downwards, and 2) I set my info bar to absolute, just so I could get it to stay in the general vicinity that I wanted it. What I'd like to know is how can I resolve these two issues? I can post the code if needed (but I figured I didn't need to seeing as it's there on the site)

Any insight would be great, cause I'm still kinda new to HTML and CSS. Thanks!

P.S. Please don't mind the colours, this is still a rough concept and I was testing out what I liked, also I know that CSS is supposed to be separate, but kodingen doesn't seem to like the <link> tag too much (this isn't the final resting place of the site either)

  • 2 Contributors
  • 4 Replies
  • 190 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by WigglesMcMuffin

Dani AI

Generated

Nice progress — this thread illustrates a few classic layout gotchas that are easy to miss when learning CSS. The behavior reported (main content not reaching the right edge or dropping down) usually comes from three overlapping issues: percentage widths + extra padding/borders exceeding 100%, mixing floats with positioned sidebars so the browser can’t fit floated boxes on one line, and using height/stacking rules (negative z-index, body floated or height:100% without parent heights) that change the containing block. ’s suggestion to pull positioned pieces out of the same positioned container was on the right track.

A simple, reliable approach is to stop fighting floats and use a layout model that understands regions — flexbox or grid — and to enable box-sizing: border-box so padding doesn’t inflate percentage widths. Keep the header separate (fixed or normal flow) and give the main row a top margin equal to the header height. If a right info column should stay visible independently, either 1) keep it in the flex/grid row so widths add up cleanly, or 2) make it fixed and give the content a right margin equal to the fixed column’s width.

Minimal structural example:

<div class="site__header">...</div>

<div class="site__row">
  <aside class="site__nav">…</aside>
  <main class="site__content">…</main>
  <aside class="site__aside">…</aside>
</div>
* { box-sizing: border-box; }
.site__row { display: flex; gap: 1rem; margin-top: 60px; }
.site__nav { width: 13%; }
.site__content { flex: 1; min-width: 0; } /* min-width prevents overflow in flex items */
.site__aside { width: 12%; }

Quick troubleshooting tips: temporarily outline boxes (border:1px solid) and check computed widths in DevTools; verify the sum of column widths plus padding/borders is <=100% (or use border-box); remove floats on body; avoid height:100% unless html/body heights are explicit; and avoid negative z-index on primary containers. The OP’s final comment indicates removing the float/positioning conflicts resolved the issue, which matches these fixes.

Recommended Answers

All 4 Replies

Member Avatar for almostbob

post the code, all of it, properly, dont waste the time of people you want to help you

Member Avatar for WigglesMcMuffin

Sorry, here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xlmns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Dark Empire Forum</title>
		<link rel="stylesheet" type="text/css" href="main.css" />
	</head>
	<body>
		<div id="header">
			<p>Will contain random features like the log in/out link, etc</p>
		</div>
		<div class="main">
			<div id="navigation">
				<img src="./imgs/forum-icon.png" width="120" height="90" alt="Basic logo" />
				<h1>Dark Empire</h1>
				<ul>
					<li>Signup link</li>
					<li>Homepage linkydink</li>
					<li>Search linkydink</li>
				</ul>
			</div>
			<div id="content">
				<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
				<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
				<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
				<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
				<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
			</div>
			<div id="info">
				<p>Useful information will hopefully go here</p>
				<p>Things like:</p>
				<ul>
					<li>Total user count</li>
					<li># of users on currently</li>
					<li>Total number of threads</li>
					<li>
						<SCRIPT>
							document.write(Date()+".")
						</SCRIPT>
					</li>
				</ul>
			</div>
		</div>
		<div id="footer">
			<p>This is the footer, not sure what'll go in here yet</p>
		</div>
	</body>
</html>

and the CSS

html{
	padding: 0;
	margin: 0;
}
body{
	float: left;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: black;
	overflow-x: hidden;
}
#header{
	position: relative;
	float: left;
	color: yellow;
	text-align: center;
	width: 100%;
	background: transparent;
	z-index: 10;
}
#footer{
	position: relative;
	float: right;
	bottom: 0;
	padding: 1pt 0;
	color: yellow;
	text-align: center;
	width: 100%;
	background: transparent;
}
.main{
	margin-top: 3em;
	margin-right: 0;
	background: black;
	padding: 0;
	z-index: -3;
}
#content{
	position: relative;
	float: left;
	width: 80%;
	height: 100%;
	background: red;
	padding-left: 2em;
	padding-top: 2em;
	padding-bottom: 2em;
	margin-bottom: .1px;
	/*padding-right: 2em;*/
	border-top-left-radius: 25px;
	moz-border-radius-topleft: 25px;
	border-bottom-left-radius: 25px;
	moz-border-radius-bottomleft: 25px;
}
#info{
	position: absolute;
	right: 0;
	width: 12%;
	height: 100%;
	color: white;
	margin-top: 2em;
	padding: 3em 2em;
	background: black;
	border-top-left-radius: 25px;
	moz-border-radius-topleft: 25px;
	border-bottom-left-radius: 25px;
	moz-border-radius-bottomleft: 25px;
}
#navigation{
	position: relative;
	float: left;
	width: 13%;
	padding: 15px;
	height: 100%;
	color: white;
	background: transparent;
}

again, a lot of the 'content' in the HTML is just filler, so I can see what is where, and such.

Member Avatar for almostbob

I dont indent, I use a code highlight editor the whitespace added to the files that may double it is unnecessary,
Move the elements that you want to position outside of other positioned elements
else all dimensions are relative to the outer element, not to the window as you expect
css shoved in the header, just to single file it on my laptop, being lazy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xlmns="http://www.w3.org/1999/xhtml">
<head>
<title>Dark Empire Forum</title>
<style type='text/css'>
body{ /*float:left;*/ width:100%; height:100%; padding:0; margin:0; background:black; /*overflow-x: hidden;*/ }
#header{ position:fixed; /*float:left;*/ color:yellow; text-align:center; width:100%; background:transparent; z-index:10; }
#footer{ position:relative; float:right; bottom:0; padding:1pt 0; color:yellow; text-align:center; width:100%; background:transparent; }
.main{ margin-top:3em; margin-right:0; background:black; padding:0; z-index:-3; }
#content{ position:relative; float:left; width:80%; height:100%; background:red; padding-left:2em; padding-top:2em; padding-bottom:2em; margin-bottom:.1px; /*padding-right:2em;*/ border-top-left-radius:25px; moz-border-radius-topleft:25px; border-bottom-left-radius:25px; moz-border-radius-bottomleft:25px;} 
#info{ position:fixed; right:0; width:12%; height:100%; color:white; margin-top:2em; padding:3em 2em; background:black; border-top-left-radius:25px; moz-border-radius-topleft:25px; border-bottom-left-radius:25px; moz-border-radius-bottomleft:25px; }
#navigation{ position:relative; float:left; width:13%; padding:15px; height:100%; color:white; background:transparent; }
</style></head>
<body>
<div id="header">
<p>Will contain random features like the log in/out link, etc</p></div>

<div id="info">
<p>Useful information will hopefully go here</p>
<p>Things like:</p>
<ul>
<li>Total user count</li>
<li># of users on currently</li>
<li>Total number of threads</li>
<li><SCRIPT>document.write(Date()+".")</SCRIPT></li>
</ul>
</div>

<div class="main">
<div id="navigation">
<img src="./imgs/forum-icon.png" width="120" height="90" alt="Basic logo" />
<h1>Dark Empire</h1>
<ul>
<li>Signup link</li>
<li>Homepage linkydink</li>
<li>Search linkydink</li>
</ul>
</div>
<div id="content">
<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
<img src="./imgs/squirrel-sith-lightning.jpg" width="400" height="300" alt="Random opening picture" />
</div>
</div>
<div id="footer">
<p>This is the footer, not sure what'll go in here yet</p>
</div>
</body>
</html>
Edited by almostbob because: n/a
Member Avatar for WigglesMcMuffin

Hey!

Finally got everything sorted, thanks for the help, and now I also know not to use whitespace anymore! :D

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.