TECH Basic CSS help

Kevin

kwyjibo
Aug 27, 2002
89,689
Michigan
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

Code:
<%@ 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

Active Member
Jan 2, 2006
48,290
Utah
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

Well-Known Member
Sep 2, 2003
55,788
Los Angeles
You've got a
Code:
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.
 
TS
TS
Kevin

Kevin

kwyjibo
Aug 27, 2002
89,689
Michigan
You've got a
Code:
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.
 

biawokauns

Active Member
Sep 18, 2001
19,873
Republic of Kalifornia
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

Code:
<%@ 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


Code:
<%@ 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>
 
TS
TS
Kevin

Kevin

kwyjibo
Aug 27, 2002
89,689
Michigan
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
 

Users who are viewing this thread

About Us

  • Please do not post anything that violates any Local, State, Federal or International Laws. Your privacy is protected. You have the right to be forgotten. Site funded by advertising, link monetization and member support.
OT v15.8.1 Copyright © 2000-2022 Offtopic.com
Served by fu.offtopic.com

Online statistics

Members online
480
Guests online
78
Total visitors
558

Forum statistics

Threads
369,476
Messages
16,887,752
Members
86,873
Latest member
vitalesan