SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question alignment problems

    I'm having trouble aligning the small boxes, the left side is ok, while the middle side boxes are staying down, not taking the space up, they are supposed to form bilateral alignment with the right side (right side ok). I've tried couple of things myself such as floating per each box, but it didn't wok .
    Also the very left part is being positioned center (somewhere in the middle of the left row*), I’m really confused.

    It is happing same way in both browsers IE & firefox, but its very interesting that in Opera is being displayed perfectly well (so for comparing purposes you can view the site I'm talking about in IE and Opera and you'll see the anomalies!)

    Site URL: http://test.rrota.net/

    I've tried the trick with clearer div but it didn’t work, or maybe I didn't use it properly?
    help will be appreciated

  2. #2
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css

    Hi -
    We'd really need to see the css coding you've used in order to help out...

    El

  3. #3
    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,

    The problem with your code is that you are floating elements down one side and then trying to float some more elements next to them. Floats will only float level with the html (in most browsers) and will not float upwards even if there is a gap.

    You either have to float an element left and then float one alongside and then one to the right. You have to keep them in this sequence alternating between left centre and right so that they float evenely.

    However this is a little tedious and what you chould be doing is to float each column separately so that you basically have just three floats to work with and you can fill each column up as you go rather than mixing an element from each column.

    Heres an example using your code that aligns everything as you want although I've only done this roughly it shhould give you the idea.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="DC.title" content="Forum" />
    <meta name="revisit-after" content="3 days" />
    <meta name="Classification" content="NGO" />
    <meta name="description" content="We build just and sustainable peace..." />
    <meta name="keywords" content="kosova, kosovo, prishtina, ngo, ojq, forum" />
    <meta name="distribution" content="GLOBAL" />
    <meta name="rating" content="General" />
    <meta name="copyright" content="copyright(c)2000-2004 Forum" />
    <meta name="author" content="Rrota" />
    <meta http-equiv="reply-to" content="info@rrota.net" />
    <meta name="language" content="sq" />
    <meta http-equiv="Content-Type" content="text/html; Select from list" />
    <meta name="robots" content="ALL, INDEX, FOLLOW" />
    <title>Tirona</title>
    <style type="text/css">
    body {
    text-align: center;
    margin: 0px;
    padding: 0px;
    min-width:775px;/* stop mozilla sliding off the edge */
    }
    .central {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 775px;
    text-align: left;
    }
    h1,h2,h3, p{
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: normal;
     padding: 0;
     margin: 0;
    }
    #border {
     width: 647px;
     border : solid #000 1px;
     margin: 0;
     padding: 0;
    }
    #topslice {
     background-color: #DDD6C6;
     height: 5px;
     width: 100%;
     margin: 0;
     padding: 0;
     color: #000;
     float: left;
     overflow : hidden;
    }
    #wrapper {
     background-color: #fff;
     padding: 0px;
     margin: 0;
     width: 497px;
     min-height : 200px;
     border-right: solid #000 1px;
     float: left;
    }
    .head {
     width: 497px;
     background-color: #FFCC00;
     height: 21px;
     border-top: solid #000 1px;
     border-bottom: solid #000 1px;
     border-right: solid #000 1px;
     float: left;
     color: #000;
    }
    .head h1{
     padding-left: 12px;
     padding-top: 3px;
     margin : 0;
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-weight: bold;
     font-size: 11px;
     text-transform: uppercase;
     color: #483A02;
    }
    .lfthead {
     width: 149px;
     height: 21px;
     background-color: #FFCC00;
     border-top: solid #000 1px;
     border-bottom: solid #000 1px;
     float: right;
     color: #000;
     background-image: url(http://test.rrota.net/images/llupa.gif);
     background-repeat: no-repeat;
     background-position: 10px 2px;
    }
    .lfthead h1{
     padding-left: 35px;
     padding-top: 3px;
     margin : 0;
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     font-weight: bold;
     font-size: 11px;
     text-transform: uppercase;
     color: #483A02;
    }
    *html .lfthead {width: 149px;}/*hack mode assuming full doctype with uri */
    #txtbox {
     margin: 0;
     float: left;
     width: 264px;
     background-color: #645A57;
     color : #FFF2BC;
     float: left;
    }
    #txtbox h2{
     text-align: left;
     padding-top: 14px;
     padding-left: 13px;
     padding-bottom: 13px;
     padding-right: 12px;
    }
    .img {
     padding: 0;
     margin: 0;
     float: right;
     vertical-align: top;
    }
    .img img {display:block}
    #cell {
    float: left;
     width: 497px;
     background-color: #645A57;
     text-align: left;
     color: #000;
     padding: 0;
     margin: 0;
     border-right: solid #000 1px;
     border-bottom: solid #000 1px;
     min-height : 183px;}
    * html #cell {height:183px}
    .clearer{
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
    }
    #firstcolumn{
     float: left;
     padding: 0;
     margin: 0;
     width: 263px;
    }
    #doublecolumn {
     width:498px;
     float:left;
    }
    .txtbox2 {
     float: left;
     padding: 0;
     margin: 0;
     padding-bottom: 6px;
     width: 263px;
     background-color: #9DCEDF;
     border-right: solid #000 1px;
     border-bottom: solid #000 1px;
    }
    .txtbox2 h1 {
     background-color: #2DACD4;
     font-weight: bold;
     font-size: 11px;
     padding: 5px;
     padding-left : 13px;
     text-transform: uppercase;
     color: #2E4061;
    }
    .txtbox2 p {padding: 6px; text-align: left;}
    .txtbox2 h2 {padding-top: 10px; font-weight: bold; color: #1B596D;}
    .txtbox2 h3{padding-right: 6px; text-align: right; color: #224C6F;}
    .txtbox2 hr {height: 1px; margin-bottom : 0px; margin-left : 10px; margin-right : 6px; background-color: #2688A6; color: #2688A6; padding:0px;}
    .txtbox3 {
     float: left;
     padding: 0;
     margin: 0;
     padding-bottom: 6px;
     width: 263px;
     background-color: #EE8DB6;
     border-right: solid #000 1px;
    }
    .txtbox3 h1 {
     background-color: #D04D84;
     font-weight: bold;
     font-size: 11px;
     padding: 5px;
     padding-left : 13px;
     padding-left : 13px;
     text-transform: uppercase;
     color: #FFE4E4;
    }
    .txtbox3 p {padding: 6px; text-align: left;}
    .txtbox3 h2 {padding-top: 10px; font-weight: bold; color: #792347;}
    .txtbox3 h3{padding-right: 6px; text-align: right; color: #792347;}
    .txtbox3 hr {height: 1px; margin-bottom : 0px; margin-left : 10px; margin-right : 6px; background-color: #2688A6; color: #2688A6; padding:0px;}
    .txtbox4 {
     float: left;
     margin: 0;
     width: 233px;
     padding: 0;
     padding-bottom: 6px;
     background-color: #FF5252;
     float: right;
    }
    .txtbox4 h1 {
     background-color: #D54343;
     font-weight: bold;
     font-size: 11px;
     padding: 5px;
     padding-left : 13px;
     padding-left : 13px;
     text-transform: uppercase;
     color: #FFE4E4;
    }
    .txtbox4 p {padding: 6px; text-align: left; color: #fff;}
    .txtbox4 h2 {padding-top: 10px; font-weight: bold; color: #792347;}
    .txtbox4 h3{padding-right: 6px; text-align: right; color: #fff;}
    .txtbox4 hr {height: 1px; margin-bottom : 0px; margin-left : 10px; margin-right : 6px; background-color: #2688A6; color: #2688A6; padding:0px;}
    .thumb {
     margin: 10px;
     float: left;
     border: solid #207089 1px;
    }
    .thumb2 {
     margin: 10px;
     float: left;
     border: solid #792347 1px;
    }
    #right {
     padding: 0;
     margin: 0;
     float: right;
     width:149px;
     background-color: #FF946A;
     color: #000;
    }
    </style>
    </head>
    <body>
    <div class="central"> 
      <!-- border of the page, container of everything -->
      <div id="border"> 
    	<!-- top slice design issue -->
    	<div id="topslice"></div>
    	<div class="head"> 
    	  <h1>mirėsevini nė faqėn zyrtare tė bashkise sė tiranės</h1>
    	</div>
    	<div class="lfthead"> 
    	  <h1>kėrko</h1>
    	</div>
    	<div id="doublecolumn"> 
    	  <div id="cell"> 
    		<!-- text container -->
    		<div id="txtbox"> 
    		  <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum 
    			volutpat enim. Vivamus nec purus in purus placerat ultricies. Pellentesque 
    			adipiscing rhoncus ipsum. In eu wisi a pede vulputate convallis. Ut 
    			lectus risus, mattis ac, adipiscing lacinia, porta id, velit. Nullam 
    			dapibus arcu ac lectus. Quisque a nisl eu ligula volutpat nonummy. 
    			Curabitur aliquet ligula nec felis. Vivamus nunc. Duis mollis pede 
    			eget enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h2>
    		</div>
    		<!-- image container -->
    		<div class="img"><img src="http://test.rrota.net/common/images/tirona.gif" alt="tirona" /></div>
    		<br class="clearer" />
    	  </div>
    	  <!-- end of cell -->
    	  <!-- clearing floats so the take no space -->
    	  <!-- wraps boxes -->
    	  <div id="wrapper"> 
    		<!-- text box 2 -->
    		<div id="firstcolumn"> 
    		  <div class="txtbox2"> 
    			<h1>qyteti dhe vizitorėt</h1>
    			<img class="thumb" src="http://test.rrota.net/common/images/house.gif" alt="" /> 
    			<h2>Historia e Tiranės</h2>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc 
    			  fermentum volutpat enim.</p>
    			<h3>mė shumė... <img src="http://test.rrota.net/common/images/arrow.gif" alt="" /></h3>
    			<hr />
    			<img class="thumb" src="http://test.rrota.net/common/images/building.gif" alt="" /> 
    			<h2>Rilindja e Qytetit</h2>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc 
    			  fermentum volutpat enim.</p>
    			<h3>mė shumė... <img src="http://test.rrota.net/common/images/arrow.gif" alt="" /></h3>
    			<hr />
    			<img class="thumb" src="http://test.rrota.net/common/images/map.gif" alt="" /> 
    			<h2>Informacione pėr vizitorėt</h2>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc 
    			  fermentum volutpat enim.</p>
    			<h3>mė shumė... <img src="http://test.rrota.net/common/images/arrow.gif" alt="" /></h3>
    		  </div>
    		  <!-- text box 3 -->
    		  <div class="txtbox3"> 
    			<h1>Urbanistika</h1>
    			<img class="thumb2" src="http://test.rrota.net/common/images/downtown.gif" alt="" /> 
    			<h2>Urbanistika 2001-2003</h2>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc 
    			  fermentum volutpat enim.</p>
    			<h3>mė shumė... <img src="http://test.rrota.net/common/images/arrow2.gif" alt="" /></h3>
    		  </div>
    		</div>
    		<!-- end first column -->
    		<!-- text box 4 *right positioning -->
    		<div class="txtbox4"> 
    		  <h1>Qytetarėt</h1>
    		  <img class="thumb2" src="http://test.rrota.net/common/images/downtown.gif" alt="" /> 
    		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum 
    			volutpat enim. Vivamus nec purus in purus placerat ultricies.</p>
    		  <h3>mė shumė... <img src="http://test.rrota.net/common/images/arrow3.gif" alt="" /></h3>
    		  <div class="clearer"></div>
    		</div>
    	  </div>
    	  <!-- end of wrapper-->
    	  <!-- right section -->
    	</div>
    	<!-- end doublecolumn-->
    	<div id="right"> test test test test test test </div>
    	<br class="clearer" />
      </div>
      <!-- end of the border-->
    </div>
    <!-- end of the central-->
    </body>
    </html>
    The right side is all in one column and that is wrapped in another float for the second column which allows the third column to float to the side and the top.

    Paul

  4. #4
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thank you

    Thank you Paul, it's working very well, and I've studied it
    thanx again
    let's make things easier


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
  •