WEB Basic CSS help

Discussion in 'OT Technology' started by Kevin, Nov 11, 2008.

  1. Kevin

    Kevin New Member

    Joined:
    Aug 27, 2002
    Messages:
    87,634
    Likes Received:
    0
    Location:
    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>
    
    
     
  2. Limp_Brisket

    Limp_Brisket New Member

    Joined:
    Jan 2, 2006
    Messages:
    48,422
    Likes Received:
    0
    Location:
    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%.
     
  3. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    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.
     
  4. Kevin

    Kevin New Member

    Joined:
    Aug 27, 2002
    Messages:
    87,634
    Likes Received:
    0
    Location:
    Michigan
    Thank you.

    Made the right div smaller and it slid right up.
     
  5. Limp_Brisket

    Limp_Brisket New Member

    Joined:
    Jan 2, 2006
    Messages:
    48,422
    Likes Received:
    0
    Location:
    Utah
    actually just leave it as is but get rid of the margin-left: 5px and it will fix it.

    edit- oh, too late! :o
     
  6. RetardedMonkey

    RetardedMonkey is a retarded monkey.

    Joined:
    Oct 21, 2006
    Messages:
    20,867
    Likes Received:
    0
    Location:
    Gold Coast, Australia
    KINGTOAD WINS THE THREAD!

    :hug:
     
  7. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    biawokauns would have replied with a solution before the thread was made.
     
  8. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    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>
    
    
     
  9. Kevin

    Kevin New Member

    Joined:
    Aug 27, 2002
    Messages:
    87,634
    Likes Received:
    0
    Location:
    Michigan
    Yes to inline styles, im gonna swap out for a css file.

    Bad naming?
    Divitus?
     
  10. Limp_Brisket

    Limp_Brisket New Member

    Joined:
    Jan 2, 2006
    Messages:
    48,422
    Likes Received:
    0
    Location:
    Utah
    Divitis - A disease related to div's.
     
  11. Kevin

    Kevin New Member

    Joined:
    Aug 27, 2002
    Messages:
    87,634
    Likes Received:
    0
    Location:
    Michigan
    What are its symptoms?
     
  12. Limp_Brisket

    Limp_Brisket New Member

    Joined:
    Jan 2, 2006
    Messages:
    48,422
    Likes Received:
    0
    Location:
    Utah
    bad breath :dunno:
     
  13. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    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.
     
  14. Kevin

    Kevin New Member

    Joined:
    Aug 27, 2002
    Messages:
    87,634
    Likes Received:
    0
    Location:
    Michigan
    Hmmm... ok. Kinda assumed that.

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

Share This Page