#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    73
    Rep Power
    11

    Goodbye CSS - welcome back with open arms TABLES




    Yet another question about CSS layout. All I want is a block that encloses three others on the left (title), centre(description) and right(image) of the encapsulating block. I can do this with my eyes shut using tables but after several frustrating hours scanning online CSS tutorials, tryng DIV, SPAN, float left/right/AnywayAtAllAndPleaseDearGodWorkThisTime, I'm still no nearer the truth.

    Code:
    <HTML>
    <HEAD>
      <style type="text/css" media="screen">
    .header {
    	background-color : #E7D69C;
            font-family : verdana, "trebuchet MS", "MS sans serif", sans-serif;
            font-size : 1.1em;
    	color : black;
    	border : 4px #CCDFCC groove;
    	margin-left : 5%;
    	padding-left : 0.2em;
    	padding-right : 0.2em;
    	width : 90%; 
    }
    .headerTitle {
    	float : left;
    	width : 33%;
    	position : relative;
    }
    .headerDescription {
    	float : left;
    	text-align : center;
    	width : 33%;
    	position : relative;
    }
    .headerImage {
    	text-align : right;
    	width : 34%;
    	position : relative;
    }
      </style>
      
     </HEAD>
    <BODY>
    <DIV CLASS="header">
    <DIV CLASS="headerTitle">
    Title
    </DIV>
    <DIV CLASS="headerDescription">
    Description
    </DIV>
    <DIV CLASS="headerImage">
    Image
    </DIV>
    
    </DIV>
    </BODY>
    </HEAD>
    Can anyone stop my slide back into tables?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Geelong, Australia
    Posts
    14
    Rep Power
    0
    I try to follow a few simple rules for these things.

    1. Always put floated elements first.
    2. Block elements like to push down, use inline to avoid that.

    So, change your style to
    Code:
    .headerTitle {
    	float: left;
    	width: 33%;
    }
    .headerDescription {
    	text-align: center;
    	width: 33%;
    	display: inline;
    }
    .headerImage {
            float: right;
    	text-align: right;
    	width: 34%;
    }
      </style>
    And also change your div order around, so your HTML is.
    Code:
    <div class="header">
        <div class="headerTitle">Title</div>
        <div class="headerImage">Image</div>
        <div class="headerDescription">Description</div>
    </div>
    And this looks great in NS7 and IE6.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    73
    Rep Power
    11
    Originally Posted by F'Nok
    I try to follow a few simple rules for these things.

    1. Always put floated elements first.
    2. Block elements like to push down, use inline to avoid that.

    So, change your style to
    Code:
    .headerTitle {
    	float: left;
    	width: 33%;
    }
    .headerDescription {
    	text-align: center;
    	width: 33%;
    	display: inline;
    }
    .headerImage {
            float: right;
    	text-align: right;
    	width: 34%;
    }
      </style>
    And also change your div order around, so your HTML is.
    Code:
    <div class="header">
        <div class="headerTitle">Title</div>
        <div class="headerImage">Image</div>
        <div class="headerDescription">Description</div>
    </div>
    And this looks great in NS7 and IE6.

    Close, but no banana. I can still hear those tables knock knock knocking at the gate.

    1/ Description is NOT centered (using Mozilla)
    2/ The order of presentation of the DIVs in the main HTML body is hardly the most logical - having to put 'image' second when it's displayed third?!?!?!?!.
    3/ What happens if I want a 4th item within the encapsulating DIV?
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    Code:
    css:
    
    .headerTitle {
    	float : left;
    	width : 33%;
    
    
    }
    .headerDescription {
    	margin:0 33%;
    	text-align : center;
    
    
    
    }
    .headerImage {
    	float : right;
    	text-align : right;
    	width : 33%;
    
    
    }
    
    
    html:
    
    <div class="header">
    	<div class="headertitle">title</div>
    	<div class="headerimage">image</div>
    	<div class="headerdescription">description</div>
    </div>
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    73
    Rep Power
    11
    Originally Posted by Akh
    Code:
    css:
    
    .headerTitle {
    	float : left;
    	width : 33%;
    
    
    }
    .headerDescription {
    	margin:0 33%;
    	text-align : center;
    
    
    
    }
    .headerImage {
    	float : right;
    	text-align : right;
    	width : 33%;
    
    
    }
    
    
    html:
    
    <div class="header">
    	<div class="headertitle">title</div>
    	<div class="headerimage">image</div>
    	<div class="headerdescription">description</div>
    </div>

    No bad. While completely illogical in the order in which you use the DIV statements (and the margin definition is not needed (in Mozilla anyway)), it at least does what I want. However, how would you do 4 separate DIVs on a similar left-right row?
  10. #6
  11. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    if you got a longer sentence in the description the margin is needed to prevent it to overlap with the left and right box.


    you can use position:absolute instead of float.
    then you can preserve the order.
    remember to have position:relative; in the parent element for the position:absolute
    Code:
    css:
    .header {
    	background-color : #E7D69C;
        font-family : verdana, "trebuchet MS", "MS sans serif", sans-serif;
        font-size : 1.1em;
    	color : black;
    	border : 4px groove #CCDFCC ;
    	margin-left : 5%;
    	padding-left : 0.2em;
    	padding-right : 0.2em;
    	width:90%;
    	position:relative
    
    }
    .headerTitle {
    	position:absolute;
    	top:0;
    	left:0;
    	width : 33%;
    }
    
    .headerDescription {
    	margin:0 33%;
    	text-align : center;
    }
    
    .headerImage {
    	position:absolute;
    	top:0;
    	right:0;
    	text-align : right;
    	width : 33%;
    }
    
    html:
    <div class="header">
    	<div class="headertitle">title</div>
    	<div class="headerdescription">description</div>
    	<div class="headerimage">image</div>
    </div>

    for more elements float is probably the best.

    Code:
    css:
    
    .headerTitle {
    	float:left;
    	width : 25%;
    }
    
    .headerDescription {
    	float:left;
    	text-align : center;
    	width : 25%;
    }
    
    .headerImage {
    	float:left;
    	text-align : right;
    	width : 25%;
    }
    
     html:
    <div class="header">
    	<div class="headertitle">title</div>
    	<div class="headerdescription">description</div>
    	<div class="headerimage">image</div>
    	<div class="headerimage">image</div>
    	<div style="clear:both;"></div>
    </div>
    Last edited by Akh; February 17th, 2004 at 07:08 PM.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    36
    Rep Power
    11
    some neat articles here about css layouts, columns, etc.

    http://www.positioniseverything.net/
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    73
    Rep Power
    11
    (Your advice much appreciated.)

    Originally Posted by Akh
    if you got a longer sentence in the description the margin is needed to prevent it to overlap with the left and right box.

    for more elements float is probably the best.

    Code:
    css:
    
    .headerTitle {
    	float:left;
    	width : 25%;
    }
    
    .headerDescription {
    	float:left;
    	text-align : center;
    	width : 25%;
    }
    
    .headerImage {
    	float:left;
    	text-align : right;
    	width : 25%;
    }
    
     html:
    <div class="header">
    	<div class="headertitle">title</div>
    	<div class="headerdescription">description</div>
    	<div class="headerimage">image</div>
    	<div class="headerimage">image</div>
    	<div style="clear:both;"></div>
    </div>
    Not sure how you would do the 4 elements with floats but your advice about relative/absolute positioning works with a bit of tweaking:
    Code:
    <HTML>
    <HEAD>
      <style type="text/css" media="screen">
    .header {
    	background-color : #E7D69C;
            font-family : verdana, "trebuchet MS", "MS sans serif", sans-serif;
            font-size : 1.1em;
    	color : black;
    	border : 4px #CCDFCC groove;
    	margin-left : 5%;
    	padding-left : 0.2em;
    	padding-right : 0.2em;
    	width : 90%;
    	height : 1.2em;
    	position:relative;
    }
    .headerFirst {
    	top : 0;
    	left : 0;
    	width : 25%;
    	position:absolute;
    }
    .headerSecond {
    	width : 25%;
    	margin : 0 -5%;
    	top : 0;
    	left : 25%;
    	text-align : center;
    	position:absolute;
    }
    .headerThird {
    	top : 0;
    	right : 25%;
    	text-align : center;
    	width : 25%;
    	position:absolute;
    }
    .headerFourth {
    	top : 0;
    	right : 0;
    	text-align : right;
    	width : 25%;
    	position:absolute;
    }
      </style>
      
     </HEAD>
    <BODY>
    <div class="header">
        <div class="headerFirst">First</div>
        <div class="headerSecond">Second</div>
        <div class="headerThird">Third</div>
        <div class="headerFourth">Fourth</div>
    </div>
        <DIV>This should be below all the above.</DIV>
    </BODY>
    </HEAD>
    As the 4 elements are encapsulated in the HEADER class DIV, I would never have thought you would need the height definition in the HEADER class. Is it not possible to have the HEADER class expand automatically to meet the height required by the enclosed DIVs?
  16. #9
  17. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    i always thought float is easier to work with, but that is just me

    with both, position:absolute and float you are taking the element out of the normal flow therefor you have problem with the parent elements height, thats why i used the div-element with clear:both after the floated elements.

    with float you can trim down the css quite much,
    and you don't have to position everything yourself
    Code:
    .headerFirst, .headerSecond, .headerThird, .headerFourth {
    	float:left;
    	width : 25%;
    }
    
    .headerSecond, .headerThird {
    	text-align : center;
    
    }
    
    .headerFourth {
    	text-align : right;
    
    }
    
    html:
    <div class="header">
        <div class="headerFirst">First</div>
        <div class="headerSecond">Second</div>
        <div class="headerThird">Third</div>
        <div class="headerFourth">Fourth</div>
        <div style="clear:both;"></div>
    </div>
    Last edited by Akh; February 17th, 2004 at 07:45 PM.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    73
    Rep Power
    11
    Originally Posted by Akh
    i always thought float is easier to work with, but that is just me

    with both, position:absolute and float you are taking the element out of the normal flow therefor you have problem with the parent elements height, thats why i used the div-element with clear:both after the floated elements.

    with float you can trim down the css quite much,
    and you don't have to position everything yourself
    Code:
    .headerFirst, .headerSecond, .headerThird, .headerFourth {
    	float:left;
    	width : 25%;
    }
    
    .headerSecond, .headerThird {
    	text-align : center;
    
    }
    
    .headerFourth {
    	text-align : right;
    
    }
    
    html:
    <div class="header">
        <div class="headerFirst">First</div>
        <div class="headerSecond">Second</div>
        <div class="headerThird">Third</div>
        <div class="headerFourth">Fourth</div>
        <div style="clear:both;"></div>
    </div>
    ...maybe I can be sold on CSS. Thanks for the time and effort.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    73
    Rep Power
    11
    Experimenting with layouts.... How do I get the right-hand DIVs (content = 'two') to automatically stretch down to the same height as the left-hand DIVs (as table cells would):

    Code:
    <HTML>
    <HEAD>
    <STYLE>
    .frame {
    	margin-left : 5%;
    	width : 90%;
    	font-size : 1em;
    	text-align : center;
    }
    .header {
    	width : 800;
    	border : 0.05em dashed black;
    	text-align : center;
    }
    .header1, .header2, .header3 {
    	float : left;
    	margin : 1px;
    	vertical-align : center;
    	font-size : 0.8em;
    	position : relative;
    	border : 0.05em red solid;
    }
    .header1 {
    	text-align : right;
    	width : 750;
    }
    .header2 {
    	text-align : center;
    	width : 40;
    }
    .clear {
    	clear : both;
    }
    </STYLE>
    </HEAD>
    <BODY>
    <DIV CLASS="frame">
    <DIV CLASS="header">
    	<DIV CLASS="header1">One<BR>One Again</DIV>
    	<DIV CLASS="header2">Two</DIV>
    	<DIV CLASS="clear"></DIV>
    	<DIV CLASS="header1">One</DIV>
    	<DIV CLASS="header2">Two</DIV>
    	<DIV CLASS="clear"></DIV>
    	<DIV CLASS="header1">One</DIV>
    	<DIV CLASS="header2">Two</DIV>
    	<DIV CLASS="clear"></DIV>
    	<DIV CLASS="header1">One<BR>One Again</DIV>
    	<DIV CLASS="header2">Two</DIV>
    	<DIV CLASS="clear"></DIV>
    </DIV>
    </DIV>
    </BODY>
    </HTML>

IMN logo majestic logo threadwatch logo seochat tools logo