Jump to content

sidebar problems

mindapolis

By mindapolis
in CSS Help

 Share

Recommended Posts

mindapolis Advanced Member

mindapolis

Posted
Posted

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>
Link to comment
https://forums.phpfreaks.com/topic/284964-sidebar-problems/
Share on other sites
possien Member

possien

Posted
Posted

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>
Link to comment
https://forums.phpfreaks.com/topic/284964-sidebar-problems/#findComment-1463264
Share on other sites
adam_bray Newbie

adam_bray

Posted
Posted (edited)

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 by adam_bray
Link to comment
https://forums.phpfreaks.com/topic/284964-sidebar-problems/#findComment-1463424
Share on other sites
possien Member

possien

Posted
Posted

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.  

Link to comment
https://forums.phpfreaks.com/topic/284964-sidebar-problems/#findComment-1463467
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.