CSS - Floating Column Not Aligned Properly...

Hi all,

Not sure if I'm aligning the container of this page properly:
http://ntcjapan.com/languages/arabic/

The page is right-aligned and displaying correctly on all browsers except I.E. 5.0

On IE 5.0, the container remains on the left of your screen, not on the right.

Due to arabic text, etc., the direction of the body is rtl

The CSS (note the "container" div at the end, plus its margin):
Code:

	body {
		height:100%;
		margin: 0px;
		padding: 0;
		background: #FFFFFF url(../../../images/0_bg_body.jpg) no-repeat fixed -5px 100px; 
	}

body {
	font-family: "Simplified Arabic", "Arabic Transparent", "Traditional Arabic", "Arial (Arabic)", "Times New Roman (Arabic)", "AGA Arabesque", "NaskhTT", "Akhbar MT", "Courir New (Arabic)", "Decotype Naskh",  "Mudir MT",  "Simplified Arabic fixed", "Tahoma (Arabic)", "Andalus", "Monotype Koufi", "Decotype Naskh Extension", "Decotype Naskh Special", "Decotype Naskh Swashed", "Decotype Naskh Variants", "Decotype Naskh Thuluth", "Simplified Arabic backslanted", "Traditional Arabic Backslanted",  Arial,Helvetica,sans-serif;
	line-height:19px;
	font-size: 13pt;
	font-weight:bold;

}


p {
	direction:rtl;
}


div {
	text-align:right;
	direction:rtl;
}


	#container { 
		margin: 0 0 0 auto;
 		text-align: left;
 		width: 762px;
		background: url(../images/0_bg_right.gif) repeat-y fixed top right; 
    		min-height: 100%;
    		height: auto;
		direction: ltr;
	}

I suppose I need an additional style for IE 5.0 and 5.5 - to tell those browsers to align the container to the right. Any ideas?

Thanks in advance!

Hi,

i'm working on this search box but I can't get the 3 elements perfectly aligned, the bottom of the elements should be aligned.

What I have is:

Search: <input> <img>

Search is <label>, input is a normal input text box, <img> is used instead of submit.
The problem is, that the <img> is about 5px higer than the other two. The Search label and input are middle aligned.

Does anyone have a solution for this positioning problem? A link with workarounds would be useful. Thanx.

http://206.169.23.2/index3.htm
http://206.169.23.2/style3.css

The borders are not aligning correctly.

I've had this problem before but figured I'd finally write for suggestions.

When tables that are aligned to a certain position of text, say to the right of the text, have style="margin-left: 10px" to avoid running right into the text, in I.E. that margin gets applied to the first line of the text as well. Easier to show:

http://wandp.american.edu/community_events.php

Notice the indentation in the text in IE that isn't in Firefox. I think what I did as a workaround before is give the table a white left border, or make an extra table column. Would like to avoid either (the border part because I might decide to change the background color or use this in several apps).

Any thoughts?

Thanks,
Jeremy

Hi,

I am making a site and it is important the text is always positioned over the background image in the same place. I have managed to do this. When I zoom out the text stays in the correct position however when I zoom in (as if I am looking on a smaller screen) the text re positions to the edge of the browser.

How can I keep the text in the same position on all monitors?

Here is what I have so far (I am very new to css):

#content {
text-align: left;
width: 1060px;
padding: 0px 30px 0px 30px;
margin-left: auto;
margin-right: auto;
}

Thanks
Cameron

How to get a text aligned vertically in a css button?

Wow I REALLY hate CSS. For hours I have been trying to figure this out:

Here is some HTML
Code:

<td>
    <div class="linksbar">
        <div class="linkstext">
            link - link - link - link
            <img src="imagelink.jpg">
            <img src="imagelink2.jpg">
        </div>
    </div>
</td>
[CODE]

the CSS
[CODE]
.linksbar {
    height: 28px;
    background-image: url(bg.jpg);
}

.linkstext {
    vertical-align: middle;
    line-height: 28px;
    font-weight: bold;
    color: white;
}

First problem: in Chrome, the text rests at the bottom of the div. I want it in the middle.

Second problem: in IE it looks like a mess. The text is sort of in the middle (more towards the bottom). the image links are at the very top. The image link height is like 20 or something.

I'm currently creating a simple website using css and its looks fine in IE however the nav bar is not aligned with everything else in Firefox. Sorry i'm new at CSS, thanks for the help in advance.

Here is the site: insightchirocare.ca

Here is the css code:
Code:

/* CSS Document */

*{
	padding:0;
	margin:0;
	width: auto;
}   
  
body {   
font-family:Verdana, Arial, Helvetica, sans-serif;    
background-repeat:repeat-x;   
background-color:#ffffff;   
padding:0;   
margin:0;   
} 

#container {
	width:800px;
	margin:auto;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}   

/* HEADER IMAGE */  
#header{   
background-repeat:no-repeat;   
background-image: url(images/header.gif);   
height: 150px;   
width: 800px;   
float:left;   
margin:300 px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;   
}   
/* HEADER BACKGROUND IMAGE END */ 

  
/* NAVIGATION */  
#nav{   
width:800px;   
float:right;   
height:30px;   
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 40px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;      
}   
  
.menu ul{   
padding:0;   
margin:0;   
list-style-type:none;   
list-style:none;   
display:inline;   
}   
  
.menu li{   
padding-right:0px;   
margin:0 0px 0 0;   
height:30px;   
list-style-type:none;   
list-style:none;   
display:inline;   
float:left;   
}   
  
span{   
display:none;   
}   
  
#home a{   
background:url(images/nav_bar/home.gif);   
width:74px;   
height:30px;   
display:block;   
} 
#home a:hover { 
background:url(images/nav_bar/home_gr.gif);   
width:74px;   
height:30px;   
display:block;  
}
#home a:active { 
background:url(images/nav_bar/home_gr.gif);   
width:74px;   
height:30px;   
display:block;  
}   
  
#about_us a{   
background:url(images/nav_bar/about_us.gif);   
width:82px;   
height:30px;   
display:block;   
}   
#about_us a:hover{   
background:url(images/nav_bar/about_us_gr.gif);   
width:82px;   
height:30px;   
display:block;   
}
#about_us a:active{   
background:url(images/nav_bar/about_us_gr.gif);   
width:82px;   
height:30px;   
display:block;   
} 
  
#first_visit a{   
background:url(images/nav_bar/first_visit.gif);   
width:81px;   
height:30px;   
display:block;   
}
#first_visit a:hover{   
background:url(images/nav_bar/first_visit_gr.gif);   
width:81px;   
height:30px;   
display:block;   
}
#first_visit a:active{   
background:url(images/nav_bar/first_visit_gr.gif);   
width:81px;   
height:30px;   
display:block;   
}   
  
#gonstead_chiro a{   
background:url(images/nav_bar/gonstead_chiro.gif);   
width:162px;   
height:30px;   
display:block;   
}
#gonstead_chiro a:hover{   
background:url(images/nav_bar/gonstead_chiro_gr.gif);   
width:162px;   
height:30px;   
display:block;   
} 
#gonstead_chiro a:active{   
background:url(images/nav_bar/gonstead_chiro_gr.gif);   
width:162px;   
height:30px;   
display:block;   
}  

#faq a{   
background:url(images/nav_bar/faq.gif);   
width:71px;   
height:30px;   
display:block;   
}
#faq a:hover{   
background:url(images/nav_bar/faq_gr.gif);   
width:71px;   
height:30px;   
display:block;   
} 
#faq a:active{   
background:url(images/nav_bar/faq_gr.gif);   
width:71px;   
height:30px;   
display:block;   
}  

#kid_chiro a{   
background:url(images/nav_bar/kids_chiro.gif);   
width:124px;   
height:30px;   
display:block;   
}
#kid_chiro a:hover{   
background:url(images/nav_bar/kids_chiro_gr.gif);   
width:124px;   
height:30px;   
display:block;   
} 
#kid_chiro a:active{   
background:url(images/nav_bar/kids_chiro_gr.gif);   
width:124px;   
height:30px;   
display:block;   
}  

#testimonials a{   
background:url(images/nav_bar/testimonials.gif);   
width:105px;   
height:30px;   
display:block;   
}
#testimonials a:hover{   
background:url(images/nav_bar/testimonials_gr.gif);   
width:105px;   
height:30px;   
display:block;   
} 
#testimonials a:active{   
background:url(images/nav_bar/testimonials_gr.gif);   
width:105px;   
height:30px;   
display:block;   
}  

#contact_us a{   
background:url(images/nav_bar/contact_us.gif);   
width:101px;   
height:30px;   
display:block;   
} 
#contact_us a:hover{   
background:url(images/nav_bar/contact_us_gr.gif);   
width:101px;   
height:30px;   
display:block;   
}
#contact_us a:active{   
background:url(images/nav_bar/contact_us_gr.gif);   
width:101px;   
height:30px;   
display:block;   
} 
/* NAVIGATION END*/ 

/* LEFT_CONTENT*/   
#left_content {
	height: 450px;
	width: 500px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #757171;
	margin-top: 0px;
	margin-left: 0px;
	float: left;
	margin-right: 5px;
	background-color:ffffff;
}   
/* LEFT_CONTENT END*/  

/* REG_CONTENT*/  
#reg_content {   
height: auto;   
width: 800px;   
font-family: Verdana, Arial, Helvetica, sans-serif;   
font-size: 12px;   
color: #757171;   
margin-top: 0px;   
margin-left: 0px; 
background-color:#ffffff; 
}   
/* REG_CONTENT END*/ 

/* RIGHT_CONTNET*/  
#right_content{
	height: 450px;
	width: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #757171;
	padding: 0;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	background-color:#e3e3e3;
}   
/* RIGHT_CONTENT END*/ 
  
h1 {   
padding:0;   
margin:0;   
font-size:16px;   
color:#008bcf;   
font-family: Verdana;   
font-weight: normal;   
}   

h2 {   
padding:0;   
margin:0;   
font-size:12px;   
color:#008bcf;   
font-family: Verdana;   
font-weight: normal;   
}  
  
p {
	padding:0;
	margin:0;
	font-size:12px;
	color:#757171;
	font-family: Verdana;
}   


/* FOOTER*/  
#footer {
	padding : 0;
	width: 800px;
	height: 40px;
	background: url(images/footer.gif);
	margin-top: 2px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
}   
/* FOOTER END*/ 

.clearfloats {clear:both;}

A:link {
text-decoration: underline; color: #008BCF;
}
A:visited {
text-decoration: underline; color: #008BCF;
}
A:active {
text-decoration: underline; color: #18fa07;
}
A:hover {
text-decoration: underline; color: #18fa07;
}

Is there any way to make some text vertically aligned inside a DIV? Just like you would do inside a cell?

Code:

<table><td valign="middle" height="100">This text is vertically aligned</td></table>

Apparently, the vertically-align CSS property only works if it is relative to other DIVs. What I want is some vertically aligned text inside a DIV.

Thanks for the help.

hi, i'm wondering whether anyone here knows something that i don't about this...

here's some code:

Code:

<div style="position:absolute; left:30px; top:90px; width:380px; height:80px; border: 3px double #000000; padding:10px; padding-top:5px; line-height:150%">
<table width="380" height="80" border=0 cellspacing=0 cellpadding=0>
<tr>
<td valign="middle">
<div align="center" style="width:380px;">
<span style="font-size:11px; text-align:left;">
aligned to the left.<BR>
but is it centered?<BR>
i think not.<BR>
</span>
</div>
</td>
</tr>
</table>
</div>

i'm able to achieve vertically centered text in the table cell, and i can center it or align it to the left, but so far in my experimenting i haven't found a way to have text that is aligned to the left, centered in the div.

i could always just add a bunch of padding-left on the div so that the text is pushed over and looks nicer although it is not centered, but i'm wondering whether there's a way to do it the way i originally planned to..

thanks very much for looking at this.

Sounds weird, but you know us designers are always looking for fresh ways to present content.

I've not actually managed to make this work, even though it seems ridiculously simple; in effect it would just be full justification except any orphaned lines would be right-justified, not left.

Any ideas?

Hi guys,

I've trawled the web for this query and have found many solutions, some work, some do not. Some are quite complex, some are fairly simple. I haven't quite found a technique I'm happy with just yet - or that I can get to work properly.

Please download the attached .zip and open the index.html in a browser.

Basically, that page will show a big main div tag container with 6 smaller divs within it, containing different sized backgound images, with text.

I would like the text to be right aligned (which it is)... but also vertically aligned in the middle (and here lies the problem).

With table cells it was easy, you aligned items right : middle. Not quite so easy with divs.... grrrrr.... they really shoulda sorted that aspect out ! Nevermind.

I've written down the Background pixel heights of the images to save people time - as I suspect the solution may lie with something to do with calculating the heights of the div tags (?)

If someone could perhaps jiggle the code and CSS a bit to help create the perfect, working vertically-aligned solution that'd be great - and then paste up either the full HTML code or full CSS code, or both please.... thanks a lot !

Cheers,
Andy

Hi

I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed...

html Code:
Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div>

  

    <div class="container"><table cellspacing="0">
      <colgroup>
        <col width="40" />
        <col width="220" />
        <col width="120" />
        <col width="65" />
        <col width="40" />
      </colgroup>
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
          <th style="width: 100%;></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td style="width: 100%;></td>
        </tr>
      </tbody>
    </table></div>

css Code:
Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }

  

  


 div.container


 {


   height: 400px;


   width: 800px;


   overflow: scroll;


 }


 table


 {


   width: 100%;


 }


 td


 {


   border-style: solid;


   border-color: silver;


   border-width: 0px;


   padding: 1px 3px;


 }


 th


 {


   border-style: outset;


   border-color: silver;


   border-width: 2px;


   background: silver;


   padding: 1px 3px;


 } 

It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells...

Please help me

Hi all,

I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise.

This is an abridged version of the site's code for example:
Code:

<style type="text/css">
<!--
#main1 {
	padding: 0px;
	margin: 0px;
}

#left {
	width:260px;
	margin:0;
	padding:0;
	float: left;
}
#left-top {
	background-image: url(../images/panel-top-left.gif);
	background-repeat: no-repeat;
	background-position: center top;
	height: 16px;
	margin: 0px;
	padding: 0px;
}
#left-middle {
	background-image: url(../images/panel-middle-left.gif);
	background-repeat: repeat-y;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 2px;
}
#left-bottom {
	background-image: url(../images/panel-bottom-left.gif);
	background-position: center;
	height: 18px;
}
#logo {
	background-image: url(../images/swalingslogo.gif);
	background-position: center top;
	width: 260px;
	height: 120px;
	background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
	padding-left: 0;
	margin-bottom:10px;
	width: 217px;
}
#navlist li
{
	list-style: none;
	margin-bottom:4px;
	padding: 0;
	font-size:1.2em;
	line-height:1.8em;
	width:217px;
	height:32px;
	background-image:url(../images/nav2.gif);
	background-repeat:no-repeat;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
	display:block;
	text-decoration: none;
	color:#039;
	width:207px;
	height:32px;
	font-weight:bold;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}
#navlist li a:hover { 
	text-decoration: none;
	color:#FF6600;
}
/* Testimonials */
div#fscroller {
	width:200px;
	height:200px;
	background-image:url(../images/bg-testimonials.gif);
	background-repeat:no-repeat;
	margin-left:8px;
}
div#fscroller p {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}

/* Middle Column */
#middle {
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	text-align: justify;
	margin-left: 260px;
}
#middle #top-left {
	background-image: url(../images/panel-top-rightleft.gif);
	height: 16px;
	font-size: 2px;
	background-repeat: no-repeat;
}
#middle #top-right {
	float: right;
	margin-top: -16px;
	background-image: url(../images/panel-top-rightright.gif); 
	height: 16px; 
	width: 20px;
	font-size: 2px;
}
#middle a {
	color: #003399;
}
#middle a:hover {
	text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
	background-image: url(../images/title-unitedkingdom.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 201px;
	margin-bottom: 6px;
}
#middle h2#antigua {
	background-image: url(../images/title-antigua.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 128px;
	margin-top: 16px;
	margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
	float: left;
}
div.minisite span {
	display: none;
}
div.minisite a {
	background-position: top;
	background-repeat: no-repeat;
	height: 168px;
	width: 190px;
	display: block;
}
div.minisite a:hover {
	background-position: bottom;
}
a#minisite-swimminglessons {
	background-image: url(../images/swimming-lessons-uk.jpg);
}

.clear {
	clear:both;
}
.hidden {
	display: none;
}

.notopgap {
	margin-top: 0;
}

.nobottomgap {
	margin-bottom: 0;
}
.inside {
	background: #EFEFEF;
	padding-left: 10px;
	padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
		
<div id="left-top"></div>
<div id="left-middle">

<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->

<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
	
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
	
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
	
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>

<div class="clear"></div>

<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
			
<div class="clear"></div>
			
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
	
</div>	
<!-- End Middle Column -->
	
</div>

I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links.

This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this.

I can't add in links properly, so I hope this is acceptable under the rules --
The site in question is: www.swalings .com/swalings/index4.asp
and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg

Hopefully that's enough information to go on, please let me know if there's something I missed out.

Thanks a lot!

Rob