sidebar problems

mindapolis · December 30, 2013

Hi, on http://anothermileministries.net/test2.php I'm trying to make the sidebar stretch to the bottom border, but when I mess with paddingbottom it just makes the road div go further down the page.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	background-color:#362A1E;
}
#mainContent {
	width:1100px;
	margin-left:auto;
	margin-right:auto;
	border-style:dashed;
	border-color:#039;
	background-color:#D4C3B2;
}
header {
		background-color: #735435;
} 
#logo {
	float: left;
}
#lonPic{
	float: right;
	padding-top:2%;
	padding-right:2%; 
}
.headerAdjust {
	clear:both;
}
#video {
	padding-top:10px;
	padding-left:10px;
	float:left;
}
#pics { 
	float:right;
	padding-right:60px;
	margin-top:10px;
}
aside {
	background-color:#785042;
}
#speakingEngagements {
	padding-top:10px;
	padding-bottom:250px;
}
#sidebar {
	float:right;
	background-color:#785E43;	
	padding:5px;
	margin-top:10px;
	margin-right:10px;
}
</style>
</head>

<body>
<div id="mainContent">

<header><!-- html5 tag<header>-->
<div id="logo">
  <img src="assets/logo.jpg" width="439" height="135" />
</div>

<div  id="lonPic">
<img src="assets/jenn2.jpg" width="100" height="144" /></div>
<div class="headerAdjust"></div>
<nav>  
    	<a href="test1.php" tabindex="1" accesskey="h">Home</a>| 
        <a href="aboutMe.php" tabindex="2" accesskey="a">About Me</a>|  
        <a href="events.php" tabindex="3" accesskey="u">Upcoming Events</a>|
		<a href="contact.php" tabindex="4" accesskey="c">Contact Me</a>
    </nav>
</header>
<div id="video">
<video width="640" height="360" controls preload="autoplay">
    <source src="assets/barbie.mp4" type="video/mp4" preload="autoplay">
    <source src="assets/barbie.ogv" type="video/ogg" preload="autoplay">
  <object type="application/x-shockwave-flash" data="/mov/player.swf"  
width="320" height="240" preload="autoplay">  
        <source src="assets/.m_barbie.mp4" type="video/mp4" preload="autoplay">
    <param name="allowfullscreen" value="true" preload="autoplay">  
    <param name="allowscriptaccess" value="always" preload="autoplay">  
    <param name="flashvars" value="file=/mov/scene.mp4" preload="autoplay">  
    <!--[if IE]><param name="movie" value="/mov/player.swf"><![endif]-->  
    <img src="/img/scene-preview.jpg" width="320" height="240" alt="Video">  
    <p>Sorry but your browser doesn't support HTML5 video.</p>  
  </object>  
</video>
</div>
<!--<aside>-->


<div id="sidebar">
<div id="speakingEngagements">
Upcoming Speaking Engagements <br />
upcoming <br />
events  <br />
will <br />
go <br />
here 
</div>
<div id="contactInfo">
Lon Johnson <br />
address <br />
city<br />
state 
zip	<br />
phone <br />
email
</div>
<!--</aside>-->
</div>
<div id = "pics">
<img src="assets/family.jpg" width="100" height="67"><br />
<img src="assets/forgiveness.jpg" width="100" height="67"><br />
<img src="assets/couple.jpg" width="80" height="71"><br />
<img src="assets/men.jpg" width="100" height="64">
</div>
<div class="headerAdjust"></div>
<div id = "road">   
<img src="assets/road2.jpg" width="465" height="248"></div> 
</body>
</html>

possien · December 30, 2013

I usually come up with some type of template. Since you are using HTML5 as your document type, it may be easier to use those tags whenever possible. You can float elements within the header, section, aside, and footer tags where ever you like. Naming conventions for your id's and classes should convey how they are used. Here is a sample template I use to get me started, hopefully this will help.

<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Your Website</title>
<style type="text/css">
body{width:1100px; margin: 2% auto;background-color: #ccffaa; border:2px solid green; }
header{height: 150px; background-color: #ddd; padding:10px;}
aside{float:right; width: 350px;background-color: #888;padding: 10px; margin: .5% }
section{margin:.5% 0; padding: 10px; background-color: #ff3232; width: 690px;}
article{border: 1px solid blue;padding:10px;margin-bottom: .5%;}
footer{height: 100px; text-align: center;background-color: #ddd;}
.clear{clear: both;}
</style>
</head>

<body>

	<header>
	<h1>Your website</h1>
	<nav>
		<a href="test1.php" tabindex="1" accesskey="h">Home</a>| 
      <a href="aboutMe.php" tabindex="2" accesskey="a">About Me</a>|  
      <a href="events.php" tabindex="3" accesskey="u">Upcoming Events</a>|
		<a href="contact.php" tabindex="4" accesskey="c">Contact Me</a>
	</nav>	
	</header>
	
	<aside>
		<h2>Aside Float Right</h2>
		<p>If my sidebar is on the right I usually put the aside tags on top of my main page content.</p>
		<p>The sidebar will only go as far down as there is content</p>
		<p>
	Lorem. Platea. Eni venenatis magna curabitur tristique velit ut justo fringilla. Mi luctus vel, arcu vestibulum mollis. Magna suspendisse sagittis, iaculis pretium elit neque egestas dapibus, mattis. Cras, sodales mi, amet mi class sollicitudin lorem nibh. Congue nisl id sit ultricies sociis. Laoreet ut, ad semper felis sit. Sapien in pede condimentum nec montes curabitur velit id fames ac massa id. Odio id. Habitant, justo netus eros commodo vitae.
</p>
<p>
	Sed est gravida molestie platea, egestas aliquet purus per. Hendrerit nunc eni fusce turpis. Fringilla quam nec in semper id. Faucibus. Parturient. Quam vestibulum odio dolor gravida vulputate odio iaculis at. Auctor convallis molestie arcu taciti sociis. Mattis malesuada eleifend felis eu augue tempor parturient pellentesque iaculis, netus purus. 
</p>

	</aside>

	
	<section>
<h2>Section</h2>
<p>Use the section tag as the main div</p>
		<article>
			<p>
	Sed est gravida molestie platea, egestas aliquet purus per. Hendrerit nunc eni fusce turpis. Fringilla quam nec in semper id. Faucibus. Parturient. Quam vestibulum odio dolor gravida vulputate odio iaculis at. Auctor convallis molestie arcu taciti sociis. Mattis malesuada eleifend felis eu augue tempor parturient pellentesque iaculis, netus purus. 
</p>sque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		</article>
		
		<article>
			<p>
	Sed est gravida molestie platea, egestas aliquet purus per. Hendrerit nunc eni fusce turpis. Fringilla quam nec in semper id. Faucibus. Parturient. Quam vestibulum odio dolor gravida vulputate odio iaculis at. Auctor convallis molestie arcu taciti sociis. Mattis malesuada eleifend felis eu augue tempor parturient pellentesque iaculis, netus purus. 
        </p>
		</article>
		
		<article>
			<p>
	Sed est gravida molestie platea, egestas aliquet purus per. Hendrerit nunc eni fusce turpis. Fringilla quam nec in semper id. Faucibus. Parturient. Quam vestibulum odio dolor gravida vulputate odio iaculis at. Auctor convallis molestie arcu taciti sociis. Mattis malesuada eleifend felis eu augue tempor parturient pellentesque iaculis, netus purus. 
        </p>
		</article>
	</section>
<div class="clear"></div>
	<footer>
		<h3>Something about your webiste</h3>
	</footer>

</body>

</html>

mindapolis · December 30, 2013

I know those things. That didn't help the problem.

possien · December 30, 2013

My point is that the structure of your page will make the road div keep going down unless you have a left and right column within the body. You can style blocks within the columns to display the way you need.

mindapolis · December 31, 2013

Oh thanks for clearing that up

mindapolis · December 31, 2013

I'm still not getting it. could I get a little more help please?

adam_bray · December 31, 2013

You haven't floated the road div which could be a problem. The way I'd structure it is by having 2 containers - div#content-main, aside#sidebar. Float them left and right and place the content container divs inside. That should stop the road div being affected by the sidebar.

From what you've said, you want to have your sidebar stretch the length of the main content area?

Using padding-bottom will only make the sidebar stretch a bit further.. you can't keep changing the padding each time your content div gets bigger/smaller. One fix is to use :before and set it to 100% height when positioned absolute. I've done a tutorial on this on my site which explains it in more depth - repeating background in sidebar (sorry mods if linking that is against the rules..hopefully it's ok).

Edited December 31, 2013 by adam_bray

possien · December 31, 2013

In the example template I put together, there is an 'aside' that is floated right to contain your right column content. The 'section' is the equivalent of a '#main' div. the header, section, aside, and footer are main blocks within the body. Within each of those sub components you can add more content and that content can be further styled (additional elements to display how you like, float, borders, padding etc).

Note your body width was 1100px. I created a 'section' with a width of 690 px and an 'aside' with a width of 350px and it is floated right. That is a total of 1040px within the body. The remaining width is taken up by margins and borders. This gives you two somewhat interdependent blocks to display your content. As adam_bray indicated the length of each will be controlled by the content. Bottom padding won't do much if the content changes. Some pages using this format have no borders and the same background to make it less noticeable and others do the opposite by accentuating the backgrounds and borders to make them draw attention to them.

Sign In

sidebar problems

Recommended Posts

mindapolis

Link to comment

Share on other sites

possien

Link to comment

Share on other sites

mindapolis

Link to comment

Share on other sites

possien

Link to comment

Share on other sites

mindapolis

Link to comment

Share on other sites

mindapolis

Link to comment

Share on other sites

adam_bray

Link to comment

Share on other sites

possien

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information