The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> bottom margin the same
MindyT
post Jan 13 2014, 03:09 PM
Post #1


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963
Hi, on http://anothermileministries.net/test2.php can someone please me figure out how to get the bottom margin of the road div to be the same of the sidebar div? Any help would be much appreciated.
CODE

'<!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;
    background-color:#D4C3B2;
}
header {
        background-color: #735435;
        padding-bottom:5px;
}
#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 {
    margin-left:  700px;
    margin-top:60px;
}
aside {
    background-color:#785042;
}
#speakingEngagements {
    padding-top:10px;
    padding-bottom:450px;
    color:#D4C3B2;
}
#sidebar {
    float:right;
    background-color:#785E43;    
    padding:5px;
    margin-top:10px;
    margin-right:10px;
}
#road {
    width:465px;
    padding-left: 5px;
}
#contactInfo {
    background-color:#D4C3B2;
}
nav {
    width:300px;
    margin-left:auto;
    margin-right:auto;
}
a:link  {
    color:#D4B489;
}
.photos {
    padding-bottom:5px;
}
</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">
<div class = "photos"><img src="assets/family.jpg" width="100" height="67"><br /></div>
<div class = "photos"><img src="assets/forgiveness.jpg" width="100" height="67"><br /></div>
<div class = "photos"><img src="assets/couple.jpg" width="80" height="71"><br /></div>
<div class = "photos"><img src="assets/men.jpg" width="100" height="64"></div>
</div>
<div class="headerAdjust"></div>
<div id = "road">  
<img src="assets/road2.jpg" width="465" height="248"></div>
</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Jan 17 2014, 08:21 PM
Post #2


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16
you could add a negative margin to the top of the road div
margin-top: -248px;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 08:31 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC