SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Troubles with columns

    Hi all

    I'm trying to fix one issue I have with my main content DIV

    I want to have 2 columns, separating sections with a 1 column title (that's working fine btw) but my left col and mainCol push the other one down below, even when their width isn't conflicting.

    So instead of showing you some code etc I'd rather ask you CSS gurus what the main reason for position problems like these is?

    (But to clear things up; The column divs and section titles are located in a wrapper DIV, the left col has a float left and a fixed width while the main col has a margin-left slightly more than leftcols' width and a float also. I've tried setting clear:both; on each with no luck)

    Btw, I realize it can be annoying as this might be one of the most frequently asked questions on SP. I apologize!

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Chances are very good that you're using absolute (or relative) positioning instead of a combination of floats and margns (sometimes even negative margins). If you are using floats, then you're probably not clearing them properly.

    Anything beyond that, and we're going to have to see your code. (And yes, I am saying that on the behalf of everyone here.)

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I'll just show you the code.

    HTML:
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    	  <html xmlns="http://www.w3.org/1999/xhtml" lang="is" xml:lang="is">
     
    <head>
    <title>Sett međ 2 tólum og segullćsingu</title>
       <meta http-equiv="Content-Type" content="text/htm; charset=UTF-8" />
     
    <base href="http://rafsol.is/" />
     
    <link rel="stylesheet" type="text/css" media="screen" href="http://rafsol.is/stylesheet.php?templateid=21&amp;mediatype=screen" />
     
    	<script type="text/javascript" src="/uploads/tools.js"></script>
     
    	<script type="text/javascript" src="/uploads/slideshow.js"></script>
     
    	<script type="text/javascript" src="/uploads/slideshow-css.js"></script>
    	<script type="text/javascript" src="/uploads/slideshow-labels.js"></script>
     </head>
    <body>
     
     <div id="header">
    <img src="/uploads/logo.png" id="logo" alt="Velkomin á Heimasíđu Rafsólar!" />
     
    </div>
     
    <div id="searchBar">
    <label for="search">Leita:</label> <input type="text" id="search" name="search" /> <span style="font-weight:bold;margin-left:65px;">Rafsól ehf • Skipholti 33 • 105 Reykjavík • sími: 553-5600 • fax: 568-5635</span>
    </div>
     
    <div id="navigation">
    <ul>
     
             <li><a href="http://rafsol.is/index.php/heim" >Heim</a>
       <ul class="depth1">
     
      		</ul></li>
     
     
             <li><a href="http://rafsol.is/index.php/um_okkur" >Um okkur</a>
       <ul class="depth1">
     
    	<li><a href="http://rafsol.is/index.php/um_okkur" >Um okkur</a></li>
     
     
         <li><a href="http://rafsol.is/index.php/um_okkur/sagan" >Sagan</a></li>
     
     
         <li><a href="http://rafsol.is/index.php/um_okkur/opnunartimar" >Opnunartímar</a></li>
     
     
         <li><a href="http://rafsol.is/index.php/um_okkur/hafdu_samband" >Hafđu Samband</a></li>
     
     
     
            </ul>   <li class="active"><a href="http://rafsol.is/index.php/vorulisti" >Vörulisti</a>
       <ul class="depth1">
     
    	<li><a href="http://rafsol.is/index.php/vorulisti" >Vörulisti</a></li>
     
     
         <li><a href="http://rafsol.is/index.php/vorulisti/dyrasimakerfi" >Dyrasímar - kerfi</a></li>
     
     
         <li><a href="http://rafsol.is/index.php/vorulisti/hotelvorur" >Hótel- &amp; heimilisvörur</a></li>
     
     
     
         <li><a href="http://rafsol.is/index.php/vorulisti/raflagnaefni" >Raflagnaefni</a></li>
     
     
         <li><a href="http://rafsol.is/index.php/vorulisti/lampar_og_ljosaskilti" >Lampar og ljósaskilti</a></li>
     
     
         <li><a href="http://rafsol.is/index.php/vorulisti/ljosaperur" >Ljósaperur</a></li>
     
     
         <li><a href="http://rafsol.is/index.php/vorulisti/tofluefni" >Töfluefni</a></li>
     
     
            </ul>   <li><a href="http://rafsol.is/index.php/thjonusta" >Ţjónusta</a>
       <ul class="depth1">
     
     
    	<li><a href="http://rafsol.is/index.php/thjonusta" >Ţjónusta</a></li>
     
     
         <li><a href="http://rafsol.is/index.php/thjonusta/fasdfa" >Rafverktakar</a></li>
     
     
            </ul>   <li><a href="http://rafsol.is/index.php/frodleikur" >Greinar</a>
       <ul class="depth1">
     
    	<li><a href="http://rafsol.is/index.php/frodleikur" >Greinar</a></li>
     
     
         <li><a href="http://rafsol.is/index.php/frodleikur/tilvarnarthjofum" >Til varnar ţjófum</a></li>
     
     
     
            </ul>   <li><a href="http://www.rafsol.is/index.php/um_okkur/hafdu_samband" >Hafđu samband</a>
       <ul class="depth1">
      		</ul></li>
     
     </ul>
    </div>
     
    <div class="rightSidebar">
    <img src="/uploads/bg-body.png" class="fill" />
    </div>
     
    <div id="content" class="container">
     
    <div class="contentTitle">
    <h2> Dyras&iacute;mar - kerfi </h2>
    <h3> Kerfi fyrir 2 &iacute;b&uacute;&eth;ir </h3>
    </div>
    <div class="middleCol">              &Iacute; settinu eru:<br />
    <ul>
        <li>1 &uacute;tist&ouml;&eth;</li>
     
        <li>2 s&iacute;mt&oacute;l</li>
        <li>Segull&aelig;sing</li>
        <li>Spennir</li>
    </ul>
    </div>
    <div class="leftCol">
    <ul align="left" id="slideshow">
        <li><img alt="Dyrasímasett" src="uploads/images/6325.jpg" /></li>
     
        <li><img alt="Innitćki" src="uploads/images/innitaeki_hljod.jpg" /></li>
    </ul>
    </div>
    <div class="contentTitle" style="clear: both;">
    <h3>T&aelig;knilegar uppl&yacute;singar</h3>
    </div>
    <div class="middleCol">Kerfi fyrir 2 &iacute;b&uacute;&eth;ir. M&ouml;guleiki &aacute; allt a&eth; 3 auka s&iacute;mt&oacute;lum<br /><img width="200" height="119" align="right" alt="" src="uploads/images/2way_tec.jpg" /><br /></div>
     
    </div> 
     
     
     
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-671856-1";
    urchinTracker();
    </script>
     
    </body>
     
    </html>

    And stylesheet:
    Code CSS:
    /* -------------------------------------------------------------- 
     
       Grid.css
       * Creates an easy to use grid of 14 columns.
     
       Based on work by:
       * Nathan Borror     [playgroundblues.com]
       * Jeff Croft        [jeffcroft.com]
       * Christian Metts   [mintchaos.com]
       * Khoi Vinh         [subtraction.com]
     
       By default, the grid is 960px wide, with columns 
       spanning 50px, and a 20px margin between columns.
     
       If you need fewer or more columns, use this 
       formula to find the new total width: 
     
       Total width = (columns * 70) - 20
     
    -------------------------------------------------------------- */
     
     
    /* A conainer should group all your columns. */
    .container {
      text-align: left;
      position: relative;
      padding: 0;
      margin: 0 auto;   /* Centers layout */
      width: 960px;     /* Total width */
    }
     
    /* Clear fix */
    .container:after { 
      content:  "."; 
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
     
    /* Use this to create a horizontal ruler across a column.
       BUG: Margins butchered in IE */
    hr { 
      background: lightblue; 
      color: lightblue; /* IE Fix */
      clear: both;
      float: left; 
      width: 100%; 
      height: 2px; 
      margin: 8px 0 8px 0; 
      padding: 0; 
      border: none; 
    }
     
     
    /* Columns
    -------------------------------------------------------------- */
     
    /* Use this class together with the .span-x classes
       to create any compsition of columns in a layout.
       Nesting columns works like a charm (remember .first and .last). */
     
    .column {
      float: left;
      margin: 0 10px;
      padding: 0;
    }
     
     
    /* Add this class to a column if you want a border on its 
       right hand side. This should be customized to fit your needs. */
     
    .border {
      padding-right: 9px;
      margin-right: 0;
      border-right: 1px solid #eee;
    }
     
     
    /* The first and last elements in a multi-column 
       block needs one of these classes each. */
     
    .first  { margin-left: 0; }
    .last   { margin-right: 0; }
     
     
    /* Use these classes to set how wide a column should be. */
    .span-1   { width: 50px; }
    .span-2   { width: 120px; }
    .span-3   { width: 190px; }
    .span-4   { width: 260px; }
    .span-5   { width: 330px; }
    .span-6   { width: 400px; }
    .span-7   { width: 470px; }
    .span-8   { width: 540px; }
    .span-9   { width: 610px; }
    .span-10  { width: 680px; }
    .span-11  { width: 750px; }
    .span-12  { width: 820px; }
    .span-13  { width: 890px; }
    .span-14  { width: 960px; margin: 0; }
     
    /* Add these to a column to append empty cols. */
    .append-1   { padding-right: 70px; }  
    .append-2   { padding-right: 140px; } 
    .append-3   { padding-right: 210px; } 
    .append-4   { padding-right: 280px; } 
    .append-5   { padding-right: 350px; } 
    .append-6   { padding-right: 420px; } 
    .append-7   { padding-right: 490px; } 
    .append-8   { padding-right: 560px; } 
    .append-9   { padding-right: 630px; } 
    .append-10  { padding-right: 700px; }
    .append-11  { padding-right: 770px; }
    .append-12  { padding-right: 840px; }
    .append-13  { padding-right: 910px; }
     
    /* Add these to a column to prepend empty cols. */
    .prepend-1   { padding-left: 70px; }  
    .prepend-2   { padding-left: 140px; } 
    .prepend-3   { padding-left: 210px; } 
    .prepend-4   { padding-left: 280px; } 
    .prepend-5   { padding-left: 350px; } 
    .prepend-6   { padding-left: 420px; } 
    .prepend-7   { padding-left: 490px; } 
    .prepend-8   { padding-left: 560px; } 
    .prepend-9   { padding-left: 630px; } 
    .prepend-10  { padding-left: 700px; }
    .prepend-11  { padding-left: 770px; }
    .prepend-12  { padding-left: 840px; }
    .prepend-13  { padding-left: 910px; }
     
     
    /* Use a .box to create a padded box inside a column. 
       Sticking to 18px wide gaps since that's the baseline. */ 
     
    .box { 
      padding: 18px; 
      margin-bottom: 18px; 
      background: #f0f0f0; 
    }
     
     
    /* Nudge your elements [subtraction.com/archives/2007/0606_nudge_your_e.php]:
       All block elements (not hr) inside a col should have a 5px padding on each side.
       (Not everyone wants this, but feel free to uncomment if you do.) 
     
    p,ul,ol,dl,h1,h2,h3,h4,h5,h6,
    caption,pre,blockquote,input,textarea {
      padding-left: 5px;
      padding-right: 5px;
    }
     
    div, table {
      margin-left: 5px;
      margin-right: 5px;
      padding: 0;
    } */
     
     
    /* Images
    -------------------------------------------------------------- */
     
    /* Remember the baseline (typography.css). */
    img { margin: 0 0 18px 0; }
     
     
    /* Use these classes to make an image flow into the column before 
       or after it. This techique can also be used on other objects. */
     
    .pull-1  { margin-left: -70px; }
    .pull-2  { margin-left: -140px; }
    .pull-3  { margin-left: -210px; }
     
    .push-1  { margin: 0 -88px 0 18px; float: right; }
    .push-2  { margin: 0 -158px 0 18px; float: right; }
    .push-3  { margin: 0 -228px 0 18px; float: right; }
     
     
    /* -------------------------------------------------------------- 
     
       Reset.css
       * Resets default browser CSS styles.
     
       Created by Erik Meyer:
       * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
     
    -------------------------------------------------------------- */
     
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-weight: inherit;
    	font-style: inherit;
    	font-size: 100%;
    	font-family: inherit;
    	vertical-align: baseline;
    }
     
    /* Remember to define focus styles! */
    :focus {
    	outline: 0;
    }
    body {
    	line-height: 1;
    	color: black;
    	background: white;
    }
    ol, ul {
    	list-style: none;
    }
     
    /* Tables still need 'cellspacing="0"' in the markup. */
    table {
    	border-collapse: separate;
    	border-spacing: 0;
    }
    caption, th, td {
    	text-align: left;
    	font-weight: normal;
    }
     
    /* Remove possible quote marks (") from <q>, <blockquote>. */
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: "";
    }
    blockquote, q {
    	quotes: "" "";
    }
     
     
    /* -------------------------------------------------------------- 
     
       Typography.css
       * Sets some default typography.
     
       Based on work by:
       * Nathan Borror     [playgroundblues.com]
       * Jeff Croft        [jeffcroft.com]
       * Christian Metts   [mintchaos.com]
       * Wilson Miner      [wilsonminer.com]
       * Typogrify         [code.google.com/p/typogrify]
     
       The default font size is 12px. The baseline is set to 
       18px. When you're setting heights of elements, always 
       remember to use a multiple of the baseline (18,36,54..).
     
       The height of images shoud also be a multiple of 18.
     
       Read more about using a baseline here:
       * alistapart.com/articles/settingtypeontheweb
     
    -------------------------------------------------------------- */   
     
    body,ul,ol,dl,h1,h2,h3,h4,h5,h6,td,th,
    caption,pre,p,blockquote,input,textarea {
      font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
      font-size: 12px;
      line-height: 18px; /* Baseline here at 150%. This is set multiple places. */
      color: #333;
    }
     
     
    /* Headings
    -------------------------------------------------------------- */
     
    h1,h2,h3,h4,h5,h6 { 
      font-family: Helvetica, Arial, "Lucida Grande", Verdana, sans-serif;
      margin: 0; 
      padding: 9px 0;
      color:#111; 
      clear:both; 
    }
     
    /* Total height for each heading has to be a multiple of the baseline (18). */
    h1 { font-size: 36px; line-height: 36px; padding: 18px 0; }
    h2 { font-size: 28px; line-height: 36px; }
    h3 { font-size: 18px; }
    h4 { font-size: 14px; }
    h5 { font-size: 12px; font-weight:bold; }
    h6 { font-size: 10px; font-weight:bold; }
     
     
    /* Text elements
    -------------------------------------------------------------- */
     
    p           { margin: 0 0 18px 0; text-align:justify; }
    p.last      { margin-bottom:0; }
    p img       { float: left; margin: 18px 18px 18px 0; padding:0; }
    p img.top   { margin-top:0; } /* Use this if the image is at the top of the <p>. */
     
    ul, ol      { margin: 18px 0 18px 18px; list-style-type:disc; }
    li          { line-height:18px; }
    ol          { list-style-type: decimal; }
    dl          { margin: 18px 0; }
    dl dt       { font-weight: bold; }
     
    a           { color: #125AA7; text-decoration: none; outline: none; }
    a:hover     { color: #000; }
     
    blockquote  { margin: 18px 0 18px 23px; font-size: 0.9em; color: #666; font-style: italic; }
    strong      { font-weight: bold; }
    em          { font-style: italic; }
    pre         { margin-bottom: 18px; line-height:18px; background: #eee; padding:8px; border:1px solid #ddd; }
    code        { font:0.9em Monaco, monospace; }
     
     
    /* Tables
    -------------------------------------------------------------- */
     
    table   { margin-bottom: 13px; border-top:1px solid #ddd; border-left:1px solid #ddd; }
    th,td   { height:17px; padding:0 8px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; }
    th      { font-weight:bold; }
     
     
    /* Some default classes
    -------------------------------------------------------------- */
     
    .small, .small p  { font-size: 10px; }
    .large, .large p  { font-size: 14px; }
    .quiet, .quiet p  { color: #666; }
    .hide             { display: none; }
     
    /* TODO: Implement image captions. */
    .caption { }
     
     
    /* Extra fancy typography
    -------------------------------------------------------------- */
     
    /* For great looking ampersands, use this code instead of &: 
       <span class="amp">&</span>  */
     
    .amp { 
      color: #666; 
      font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif; 
      font-size: 1.1em;
      line-height:10%; /* Fix to maintain correct baseline */
      font-style: italic;
    }
     
    /* For great looking quote marks in titles, replace "asdf" width:
       <span class="dquo">“</span>asdf”
       (That is, when the title starts with a quote mark). */  
     
    .dquo { margin-left: -.7em; } 
    /* (You may have to change this value depending on your font size). */
     
     
     
     
    html, body, ul {
    padding: 0;
    margin: 0;
     
    }
     
    DIV#header {
    height: 99px;
    width: 684px;
    background: #FFF;
    }
     
    DIV#searchBar {
    height: 33px;
    width: 684px;
    background: #ffcc00 url(/uploads/searchbar.png) repeat-x;
    padding-top: 12px;
    padding-left: 21px;
    overflow: hidden;
    position: relative;
    padding-right: 0;
    }
     
     
    IMG#logo {
    float: left;
    margin-left: 20px;
    margin-top: 18px;
    }
     
    DIV#navigation {
    width: 684px;
    height: 168px;
    background: #000;
    padding-left: 21px;
    float: left;
    position: relative;
    text-decoration: none;
    text-transform: lowercase;
    font-weight: normal;
    clear: all;
    margin-bottom: 18px;
    }
     
    DIV#navigation ul {
    background: #000;
    /*padding-top: 18px;*/
    z-index: 1;
    position: absolute;
    height: 168px;
    }
     
    DIV#navigation ul li {
    color: #b0a2a2;
    background: #000;
    list-style: none;
    width: 112px;
    clear: left;
    float: left;
    /*margin-right: 5px;*/
    }
     
    DIV#navigation ul li a {
    display: block;
     margin-right: 5px;
     margin-left: 5px;
     border-top: 1px solid #1a1a1a;
    }
     
    DIV#navigation ul ul {
     display: none;
     width: 112px;
     height: 186;
     position: absolute;
     z-index: 2;
     top: 0px;
     cursor: pointer;
     padding-right: 5px;
     padding-left: 5px;
    }
     
    DIV#navigation ul ul li a {
     border-top: 1px solid black;
     
    }
     
    div#navigation ul li.active ul {
     z-index: 1;
     width: 112px;
    }
     
     
    DIV#navigation ul li.active ul li a,
    DIV#navigation ul li:hover ul li a {
    color: #b0a2a2;
    display: block;
    }
     
    div#navigation ul ul li {
     white-space: nowrap;
     width: 112px;
     float: none;
    }
     
    div#navigation ul li.active ul, div#navigation ul li:hover ul {
     display: block!important;
    }
     
    DIV#navigation ul a,
    DIV#navigation ul,
    DIV#navigation ul li ul a,
    DIV#navigation ul li:hover ul li a  {
     color: #b0a2a2;
    }
     
    DIV#navigation ul li ul
    DIV#navigation ul li ul a,
    DIV#navigation ul li ul li,
    DIV#navigation ul li ul li.active
     {
     background: #1c1c1c;
    }
     
    DIV#navigation ul a:hover,
     DIV#navigation ul li.active a,
     DIV#navigation ul li.active ul li.active a,
     DIV#navigation ul li.active ul li.active a:hover,
     DIV#navigation ul li:hover a,
     DIV#navigation ul li:hover ul li a:hover {
    color: #ffcc00;
    }
     
     
    DIV#navigation ul li ul {
    background: #1c1c1c;
    left: 112px;
    position: absolute;
    }
     
     
     
    a, a:hover {
    color: #e2b500;
    }
     
    a:hover {
    text-decoration: underline;
    }
     
    label {
    font-weight: bold;
    }
     
    DIV#content {
    position: relative;
    float: left;
    width: 694px;
    padding-top: 18px;
    padding-left: 25px;
    }
     
    DIV.contentTitle {
    position: relative;
    border-bottom: 1px solid #e3e3e3;
    clear: both;
    text-transform: lowercase!important;
    margin-bottom: 18px;
    height: 35px;
    }
     
    DIV.contentTitle h2 {
    position: absolute;
    bottom: -18px;
    width: 220px;
    font-size: 18px;
    margin-bottom: 0;
    color: #111;
    }
     
    DIV.contentTitle h3 {
    color: #9f9f9f;
    position: absolute;
    bottom: -8px;
    margin-left: 230px;
    font-size: 18px;
    margin-bottom: 0px;
    }
     
    DIV.rightSidebar {
    margin: 0;
    padding: 0;
    margin-left: 705px;
    margin-top: -162px;
    height: 330px;
    }
     
    DIV.rightSidebar img.fill {
    width: 100%;
    height: 330px;
    overflow: hidden;
    z-index: 3;
    }
     
    DIV.middleCol {
    float: left;
    margin-left: 231px;
    width: 400px;
    }
     
    DIV.middleCol ul {
    margin-left: 16px;
    }
     
    DIV.leftCol
    {
     float: left;
     width: 220px;
     clear: both;
    }
     
    DIV.leftCol ul li
    {
     list-style: none;
    }
     
     
    #slideshow.js{
    	width:185px;
    	border:1px solid #645014;
    	padding:5px;
    	background:#fff;
    	margin:0 0 10px 0;
    	color:#000;
    }
    .slidenav{
    	width:185px;
            border: 1px solid #645014;
            border-top: none;
    	border-bottom: none;
    	padding:5px;
    	margin:1em 0 0 0;
    	text-align:center;
    	font-weight:bold;
    	background:url(/uploads/slideshow_bg.PNG) repeat-x #ccc;
    	font-size:90%;
    }
    .slidenav a{
    	text-decoration:none;
    	color:#000;
    }
    .slidenav span{
    	padding:0 1em;
    	color:#000;
    }
    #slideshow.js img{
    	display:block;
    	margin:0 auto;
    }
    #slideshow.js li{
    	display:none;
    	padding:0;
    }
    #slideshow.js li.current{
    	display:block;
    }
     
    ul#slideshow
    {
    list-style-type: none;
    }

    The code I'm working on is the <div class="leftCol"> and class="middleCol"

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can't really tell what you are trying to do as your code doesn't make much sense and it basically doing what you tell it to do .

    Your first float middleCol has a large margin-left (nothing can live in that margin in normal circumstances) which pushes it toward the centre which means that the leftCol float which follows it will start underneath and to the left because there is nowhere else for it to go and because you have added clear:both to it.

    If you want 2 columns then simply float the left column first in source in the html and then float the middle column. The left margin on the middle column should only be the distance that you want it away from the left columns edge.

    If you have multiple items in each column then don't float loads of left and right columns just float the 2 columns and let the content stack inside each.

    I think this may have been what you were trying to do.
    Code:
            <div class="leftCol">
            <ul align="left" id="slideshow">
                <li><img alt="Dyras&#237;masett" src="uploads/images/6325.jpg" /></li>
                <li><img alt="Innit&#230;ki" src="uploads/images/innitaeki_hljod.jpg" /></li>
            </ul>
         </div>
       <div class="middleCol"> &Iacute; settinu eru:<br />
            <ul>
                <li>1 &uacute;tist&ouml;&eth;</li>
                <li>2 s&iacute;mt&oacute;l</li>
                <li>Segull&aelig;sing</li>
                <li>Spennir</li>
            </ul>
        </div>
        <div class="contentTitle" style="clear: both;">
            <h3>T&aelig;knilegar uppl&yacute;singar</h3>
        </div>

    Code:
    .middleCol {
    float: left;
    width: 400px;
    }
    leftCol
    {
     float: left;
     width: 220px;
    }

  5. #5
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post a link to a layout. There might be easier solutions to what you are trying to achieve. Post a link to an image uploaded elsewhere. As you may know all attached images have to be approved and that takes time.

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I owe you one :P

    It was dead simple like you showed. I've just been staring at the problem for too long


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •