TECH Basic CSS help

[Kevin]

I'm trying to create a simple 2 column layout within my layout.

The div on the left is red, for debugging purposes. (divLeft)
The div on the right is white. (divRight)

I can't figure out why the div on the right doesn't go all the way to the top.
http://autoshowreport.com/Articles.aspx?ID=14

<%@ Page Language="C#" MasterPageFile="~/asr.master" AutoEventWireup="true" CodeFile="Articles.aspx.cs"
    Inherits="Articles" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="divLeft" style="width:75%; float:left; margin-left:5px; background-color:Red;">
        <span id="spnHeadline" runat="server">HEADLINE HERE</span>
        <br />
        <span id="spnStory" runat="server">story here</span>
    </div>
    <div id="divRight" style="width:25%; float:right; background-color:White;">
        <div id="divRightAd" style="background-color:White; width: 100%; float:right;">
        <center><img src="images/skyscraper.gif"></center>
        </div>
    </div>
</asp:Content>

 

[Limp_Brisket]

i think when you're making a two column layout you want them both to float left. also i think it's not aligning correctly is because you have one of width 75% and one of width 25% but the you also have margin-left 5px on the left column which makes your width > 100%.

 

[kingtoad]

You've got a

margin-left: 5px;

declared on the #divLeft element. That's causing it to push over 5 pxiels to the right, so divRight is unable to go to the top because there's no room for it.

 

[Kevin]

You've got a

margin-left: 5px;

declared on the #divLeft element. That's causing it to push over 5 pxiels to the right, so divRight is unable to go to the top because there's no room for it.

Thank you.

Made the right div smaller and it slid right up.

 

[Limp_Brisket]

actually just leave it as is but get rid of the margin-left: 5px and it will fix it.

edit- oh, too late!

 

[RetardedMonkey]

KINGTOAD WINS THE THREAD!

 

[kingtoad]

KINGTOAD WINS THE THREAD!

biawokauns would have replied with a solution before the thread was made.

 

[biawokauns]

I'm trying to create a simple 2 column layout within my layout.

The div on the left is red, for debugging purposes. (divLeft)
The div on the right is white. (divRight)

I can't figure out why the div on the right doesn't go all the way to the top.
http://autoshowreport.com/Articles.aspx?ID=14

<%@ Page Language="C#" MasterPageFile="~/asr.master" AutoEventWireup="true" CodeFile="Articles.aspx.cs"
    Inherits="Articles" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="divLeft" style="width:75%; float:left; margin-left:5px; background-color:Red;">
        <span id="spnHeadline" runat="server">HEADLINE HERE</span>
        <br />
        <span id="spnStory" runat="server">story here</span>
    </div>
    <div id="divRight" style="width:25%; float:right; background-color:White;">
        <div id="divRightAd" style="background-color:White; width: 100%; float:right;">
        <center><img src="images/skyscraper.gif"></center>
        </div>
    </div>
</asp:Content>

you have some divitus, bad naming, and a ton of inline styles

<%@ Page Language="C#" MasterPageFile="~/asr.master" AutoEventWireup="true" CodeFile="Articles.aspx.cs"
    Inherits="Articles" Title="Untitled Page" %>

<style type="text/css" media="screen">
	div#content{
		width:75%; 
		float:left; 
		background: #f91e1e;
	}
	
	div#ad-skyscraper{
		width:25%;
		float:right;
		background-color: #fff;
		text-align: center;
	}
	
	img#skyscraper{
		width: 100%; 
		background: #fff;
	}
	
	.float-right{
		float: right;
	}
</style>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="content" >
        <span id="headline" runat="server">HEADLINE HERE</span>
        <br />
        <span id="story" runat="server">story here</span>
    </div>
    <div id="ad-skyscraper">
        <img class="float-right" src="images/skyscraper.gif" alt="skyscraper" />
    </div>
</asp:Content>

 

[Kevin]

you have some divitus, bad naming, and a ton of inline styles

Yes to inline styles, im gonna swap out for a css file.

Bad naming?
Divitus?

 

[Limp_Brisket]

Yes to inline styles, im gonna swap out for a css file.

Bad naming?
Divitus?

Divitis - A disease related to div's.

 

[Kevin]

Divitis - A disease related to div's.

What are its symptoms?

 

[Limp_Brisket]

What are its symptoms?

bad breath

 

[kingtoad]

What are its symptoms?

Divitis refers to excess number of <div> containers that are unnecessary. Meaning, you can eliminate code and reduce the number of containers by applying more stylesheets to the other containers.

 

[Kevin]

Divitis refers to excess number of <div> containers that are unnecessary. Meaning, you can eliminate code and reduce the number of containers by applying more stylesheets to the other containers.

Hmmm... ok. Kinda assumed that.

I'm sure i'll figure it out naturally while working