HTMLHelp Forums > Trying to align my divs

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

chris2307

Jan 11 2012, 05:28 AM

Hi all,

I think this is mainly to do with CSS although I suspect, some HTML changes may also be needed here. Anyhow, I am attempting to align two divs to be beside each other. I am doing this within the main div of my page which will act as a container. However, everything I try will not work. I just see no changes in the page what-so-ever! I am new to this (as I usually just whack something together in dreamweaver, using tables

)

CODE

<!DOCTYPE HTML>
<html>

<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="nav.css">
<meta charset="utf-8">
<meta name="keywords" content="Wells","Somerset","Weddings","Wedding Planning,Wells, Somerset,Parties,Events,Events Management, Weddings in Somerset, Catering, Catering in Somerset."/>
<title>Gert Lush Events - Weddings, Catering, Parties, Functions - Based in Somerset</title>
</head>

<body>

<header>HEADER (Banner)</header> 

<nav>
  <table id="links" width="100%" height="95%">
    <tr>
      <td>
        <a href="index.html">Home</a>
        <a href="services.html">Services</a>
        <a href="food.html">Menus</a>
        <a href="gallery.html">Gallery</a>
        <a href="reviews.html">Testimonials</a>
        <a href="contact.html">Contact</a>
       </td>
    </tr>
  </table>
</nav>

<div>
  <div class="left">MAIN CONTENT</div>
  <div class="right">MAIN CONTENT</div>
</div>

<aside class="left"></aside> 

<aside class="right"></aside> 

</body>

</html>

CODE

header{
width:80%;
height:20%;
background:#FFDC97;
color:white;
text-align:center;
position:fixed;
top:0%;
left:10%;
}

nav{
font-size:62.5%;
width:80%;
height:5%;
background-image: -o-linear-gradient(bottom, #3C2414 40%, #A68153 90%);
position:fixed;
top:20%;
left:10%;
}

div{
width:80%;
height:100%;
background-image: -o-linear-gradient(top, #FFDC97 0%, #FFFAE8 100%);
color:black;
text-align:center;
position:fixed;
top:25%;
left:10%;
}

#left{
width:35%;
height:35%%;
float:left;
background:black;
}

#right{
width:35%;
height:35%%;
float:right;
background:black;
}

aside.left{
height:100%;
width:10%;
background-image: -o-linear-gradient(right, #494949 0%, #767676 100%);
position:fixed;
top:0px;
right:0px;
}

aside.right{
height:100%;
width:10%;
background-image: -o-linear-gradient(left, #494949 0%, #767676 100%);
position:fixed;
top:0px;
left:0px;
}

Above is the relevant HTML and CSS code. For now, the left and right classes are blank. They haven't been blank previously but I have tried so many different combinations or values in there that I have given up and just want to start a fresh!

I anyone could help me out with this, I would be very grateful! I know, it is a simple thing to get right but I must be missing something!

Thanks

pandy

Jan 11 2012, 08:18 AM

Several things. This rule

CODE

div{
width:80%;
height:100%;
background-image: -o-linear-gradient(top, #FFDC97 0%, #FFFAE8 100%);
color:black;
text-align:center;
position:fixed;
top:25%;
left:10%;
}

will affect the floated DIVs also, i.e. those declarations that aren't overridden in the more specific rules for them will, for example the fixed positioning. Give the container DIV an id and use that as the selector. Just because you give something an id or class, general selectors aren't ignored. The 'div' selector matches any and all DIVs, no matter if they have an ID and 10 classes.

You've given the column DIVs classes, but in the rules for them you use id, not class, so those rules apply to nothing.

You've also used double percentage signs for the height of those floated divs.

chris2307

Jan 11 2012, 10:46 AM

Thank you very much your help! I was able to sort my page out with the advice you gave

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.