CSS - Align Image Next To Search Box

im trying to get the menu tabs to line up properly, if you notice they are slightly floating higher than they should and was stuck in trying to figure out how to fix this.



here is my css code i used:

Code:

a:hover#index, a:hover#search, a:hover#ucp, a:hover#members {
	background: url("./images/home-button.gif") 0 0 no-repeat;
	background: url("./images/design-and-engineering-button.gif") 0 0 no-repeat;
	background: url("./images/how-to-rebuild-button.gif") 0 0 no-repeat;
	background:url("./images/installation-button.gif") 0 0 no-repeat;
}

a#index, a#design, a#howto, a#articles  {
	width: 77px;
	height: 28px;
	float: left;
	

}

a#index {
	background: url("./images/home-gray.gif") 0 0 no-repeat;
}
a#design {
	background: url("./images/design-and-engineering-gray.gif") 0 0 no-repeat;
}
a#howto {
	background: url("./images/how-to-rebuild-gray.gif") 0 0 no-repeat;
}
a#articles {
	background:url("./images/installation-gray.gif") 0 0 no-repeat;
}

In the main page here, there look to be 2 columns.
How can I align all the smaller images with the bottom of the big image?
Sometimes there are 3 photos, sometimes there are 6.
At the moment it looks like it is all in divs.
Is there a way to do it in CSS with the current code.
The HTML looks a bit messy:
http://www.truly organic foods.com/cashew-cacao-cluster-275g.php

Ok,

I have a div tag set and a width at 500px. I have some and image, some text, and second image.

Main questions. I want that second image to be aligned at the far right side of the 500 pixel wide div element and vertically align it in the middle. What is that attribute I should use?

When I used float it caused problems with my 1px border.

Hopefully this makes
- Mike

Hi, I'm fairly new to CSS but I've been enjoying working with it. I've now stumbled onto a problem that is making me tear my hair out. I have a centered, fixed width 2-column design. and I'm trying to insert an image and float it left so that the text in the div wraps around it.

The problem is that the image keeps being pushed down to the 3rd or 4th paragraph instead of the actual paragraph it's placed in.


What could be causing this? I've included my code below. Thanks!

Code:

/*----------PAGE CENTERED AND FLUSH TOP-----*/
*{margin:0px;
padding: 0px;
}

/*---------------BODY BACKGROUND------------*/
body{
background-color:#333333;
}

/*-----------BACKGROUND-CONTAINER-----------*/
#background-container{
width: 780px;
background-color:white;
margin: 0px auto;
padding-top:0px;
padding-bottom:0px;
font-family:Arial;
font-size:10pt;
}

/*-------HEADER ELEMENTS----------*/

#banner{
width: 780px;
height: 200px;
background-color:#CC9900;
background-image:url();
border-bottom: 5px solid #333333;
}

#header{
width:770px;
background-color:#FFFFFF;
background-image:url(vertical-scanline.jpg);
padding-left:10px;
font-family: Arial;
font-size:29px;
font-weight: bold;
}


/*-----------BEGIN DROP-DOWN MENU--------*/

div#listmenu{
background-color:#860505;
font: 10pt Arial;
float:left;
width:780px;
margin: 0px auto;
}

div#listmenu ul{
margin: 0 0 0 30px;
}

*html div#listmenu ul{
float:left;
border-left: 1px solid gray;
margin-left:15px;
}

*html a{display:block;
color:#FFFFFF;}

div#listmenu li{
float:left;
position:relative;
background-color:#860505;
list-style-type:none;
padding: 0 6px;
border-right:1px solid black;
}


div#listmenu ul li ul{
margin: 0px;
position:absolute;
width:10em;}


div#listmenu ul li ul li{
width:100%;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}

div#listmenu li{first-child:
border-left: 1px solid black;
}

div#listmenu ul li ul li {first-child:
border-top: 1px solid gray;
}


div#listmenu a{ 
text-decoration:none;
font-weight:bold;
color:#ffffff;
display:block;
padding: 0 6px;
background-color:#860505;
}

div#listmenu a:hover{
background-color:#FFFFFF;
color:#000000;
}


body div#listcontainer ul li ul {display:none;}
div#listcontainer ul li:hover ul {
display:block;
}
div#listcontainer ul li:hover ul, div#listcontainer ul li ul:hover {display:block;
z-index:25;
}

/*-----------END DROP-DOWN MENU--------*/


/*-----CLEARING ELEMENT BEGIN---------*/
.clearfix:after {      
content: ".";       
display: block;     
height: 0;    
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}     
* html .clearfix {height: 1%;}     
.clearfix {display: block;}   
/*-----CLEARING ELEMENT END---------*/



/*--------------MAIN CONTENT---------*/
#main-container{
background-color:#ffffff;
}

/*----------COLUMNS--------*/
#sectionright{
width:190px;
background-color:#860505;
border-bottom: 5px solid #333333;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-indent:20px;
float:right;
}

#rightcol{
width:190px;
background-color:#CCCCCC;
font-family:"Arial";
color:#000000;
font-size:12px;
text-align: left;
text-indent:20px;
border-bottom: 5px solid #333333;
padding:0px;
float: right;
clear:right;
}

#subscription{
width: 190px;
background-color:#CC9900;
border-bottom: 5px solid #333333;
font-family:Arial;
text-align:left;
font-size:10px;
margin-bottom:3px;
float: right;
clear:right;
}

#crisp{
width:190px;
height:150px;
background-color:#FFFFFF;
border-bottom: 5px solid #333333;
font-family:"Arial";
color:#000000;
font-size:11px;
text-align:left;
float:right;
clear:right;
margin-bottom:3px;
}


#logo{
width:190px;
height:90px;
background-color:#FFFFFF;
border-bottom: 5px solid #333333;
float: right;
clear:right;
}

#left-floater{
width:150px;
padding-top:50px;
float:right;
background-color:#FFFFFF;
font-size:11pt;
}

#floater-bottomleft{
width:150px;
padding-top:50px;
float:right;
background-color:#FFFFFF;
font-size:11pt;
}



#bottom{
width: 675px;
clear:right;
background-color:#FFFFFF;
margin-top: 15px;
margin-bottom: 15px;
}

#footer{
height:15px;
width: 780px;
background-color:#999999;
font-family:"Arial";
font-size:10px;
text-align:center;
margin-top:5px;
clear:right;
}


/*-----------BODY ELEMENTS-------*/

.subheader{
background-color:#D1A10D;
font-family:"Arial";
font-size:19px;
font-weight: bold;
text-align:left;
text-indent:5px;
padding-top:5px;
padding-bottom: 2px;
}


.pagesub{
background-color:#FFFFFF;
font-family:"Arial";
font-size:16px;
font-weight: bold;
color:#860505;
text-align:left;
margin-top:5px;
margin-bottom: 5px;
}

.column-title{
width: 190px;
font-family:Arial;
color: #000000;
font-size: 14px; 
font-weight:bold;
text-align: center;
}

div#main-container img {
float:left; 
border: 1px solid #333;
}



/*------PARAGRAPH PROPERTIES-----*/

.p-main{
width:560px;
margin-left:5px;
padding-top:10px;
padding-bottom:10px;
text-align:justify;
font-size:10pt;
}

ul{
padding-left:15px;
list-style:none;
}

.pcolumn{padding-left: 40px;}
.p-ul{font:10pt Arial;}
.ptop{margin-bottom:5px;}


/*----------------LINK PROPERTIES--------------*/
a:link{color:#000000; background-color:transparent;}
a:visited{color:#CC0000; background-color:transparent;}
a:active{color:#000000; background-color:transparent;}

/*-----------RIGHT COL AND CRISP LINK PROPERTIES----*/
div#rightcol a:link{color:#000000; background-color:transparent;}
div#rightcol a:visited{color:#CC0000; background-color:transparent;}
div#rightcol a:active{color:#000000; background-color:transparent;}

div#crisp a:link{color:#000000; background-color:transparent;}
div#crisp a:visited{color:#CC0000; background-color:transparent;}
div#crisp a:active{color:#000000; background-color:transparent;}


/*------HTML BELOW-----*/

<body>
<div id= "background-container">
<div id="listmenu">
<div id="listcontainer" class="clearfix">
<ul>
<li><a href="http://www.crge.umd.edu">Home</a></li>
<li><a href="#">Who We Are</a><ul>
<li><a href="#">Director's Message</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Faculty</a></li>
<li><a href="#">Funders</a></li>
<li><a href="#">Affiliates</a></li>
</ul>
</li>


<li><a href="#">Research</a>
<ul>
<li><a href="#">Research Program Areas</a></li>
<li><a href="#">Research Interest Groups</a></li>
<li><a href="#">CrISP Research Training Program</a></li>
<li><a href="#">Intersectional Research Database</a></li>
</ul>
</li>


<li><a href="#">Publications</a>
<ul>
<li><a href="#">Research Connections 2007</a></li>
<li><a href="#">Research Action Briefs</a></li>
<li><a href="#">Campus Report</a></li>
</ul>
</li>


<li><a href="#">Resources</a>
<ul>
<li><a href="#">Professional Opportunities</a></li>
<li><a href="#">Alternative News Sources</a></li>
<li><a href="#">Tools from Graduate Colloquium</a></li>
</ul>
</li>


<li><a href="#">Events</a>
<ul>
<li><a href="#">Graduate Colloquium</a></li>
<li><a href="#">QRIG Seminars</a></li>
<li><a href="#">MC/VC Series</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</li>


<li><a href="#">Media</a>
<ul><li><a href="">Press Releases</a></li></ul>
</li>


<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>

<div id="header">The Consortium on Race, Gender and Ethnicity: CRGE</div>
<div id="banner">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="780" height="200">
    <param name="movie" value="CRGEbanner.swf">
    <param name="wmode" value="transparent">
    <embed wmode="transparent" src="CRGE%20banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="200"></embed>
  </object>
</div>

<div id="sectionright">Who We Are</div>
<div id="rightcol"><p class="p-right"><b>In This Section</b></p>
<p><ul>
<li><a href="http://www.crge.umd.edu/about.html" target="_blank">Director's Message</a></li>
<li><a href="http://www.crge.umd.edu/staff.html" target="_blank">Staff</a></li>
<li><a href="http://www.crge.umd.edu/faculty.html" target="_blank">Faculty</a></li>
<li><a href="http://www.crge.umd.edu/funders.html" target="_blank">Funders</a></li>
<li><a href="http://www.crge.umd.edu/affiliates.html" target="_blank">Affiliates</a></li>
</ul></p>
&nbsp;<br>
&nbsp;<br>
</div>
<div id="subscription">
<form method="post" action="http://www.emailmeform.com/fid.php?formid=35482">
<INPUT TYPE=hidden NAME=FCode VALUE="8gdrzytp">                
<table cellpadding="2" cellspacing="0" border="0" bgcolor="#CC9900">
<tr>
<td>
<font face="Arial" size="2" color="#000000">Subscribe to CRGE's Listserv</font>
 <div style="" id="mainmsg"> </div>
</td>
</tr>
</table>
<br>
<table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">
<tr valign="top">
 <td nowrap><font face="Arial" size="2" color="#000000">Name</font></td>
 <td>
<input type="text" name="FieldData0" value="" maxlength="100" size="20"> </td>
</tr>      
<tr valign="top">
 <td nowrap><font face="Arial" size="2" color="#000000"> Email</font></td>
 <td>
<input type="text" name="FieldData1" value="" maxlength="100" size="20"> </td>
</tr>      
<tr>
 <td colspan="2">
</td>
</tr>
<tr>
 <td></td>
 <td align="left">
<input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;">
<input type="submit" class="btn" value="Subscribe" name="Submit"></td>
</tr>
</table>                      
</form>
</div>
<div id="logo"><p align="center"><img src="umlogo.gif"></p></div>
<div id="main-container">
<p class="subheader">Director's Message</p>
<p class="p-main"><img src="btdill2.jpg" width="150" height="175" />Welcome to the Web site for the Consortium on Race, Gender and Ethnicity.</p>
<p class="p-main">The Consortium is an association of academic units and individual faculty on the University of Maryland campus whose mission is to promote, advance, and conduct research, scholarship, and faculty development that examines the intersections of race, gender, and ethnicity with other dimensions of difference.</p>

<p class="p-main">Established in 1998 with support from the Colleges of Arts and Humanities, Behavioral and Social Sciences, the Graduate School, and the Office of the Provost, the Consortium seeks to: support, coordinate, and facilitate the activities of the many outstanding faculty and academic units at Maryland engaged in scholarship that focuses on intersections of race, gender, and ethnicity; and to build visibility both on and off-campus for our exceptional wealth of resources.</p>

<p class="p-main">Through our affiliates, community partners, and research interest groups, we encourage an intellectual climate that supports collaboration. Through our Research Program Areas, we promote approaches that contextualize the lives and experiences of the individuals and groups that participate in our research. Through this Web site and other dissemination efforts, we develop applications of knowledge to human problems. Through a variety of research training opportunities we seek to transfer intellectual capital to upcoming generations.</p>

</div>
<div id="footer"><p>Home | Who We Are | Research | Publications | Resources | Events | Media | Contact Us</p></div>
</div>
</body>

I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other.

In safari it looks fine right now.

http://www.ryanbuckley.ca/photos/

Can anyone help with this little annoyance?

Thanks in advance!
Ryan

Hello.

I am using a Gallery which I bought from ThemeForest. I am having trouble aligning the image to center.

Check the second image, It's aligned to left by default.

I tried through many css ways which isn't helping at all.

Demo:
digloud[dot]com/user_data/techkid/phoenix_gallery/

Any help is highly appreciated.

Hi!

I'm in no way "new" to CSS and html, but I don't work with it on a regular basis. That said, what I'm trying to do, I would expect to work without too much trouble, but it's just not behaving like I'd expect.

Seeing code is always a lot easier than trying to describe it, so here's the link to the page I'm trying to fix :
chromocode.ca/test/

The issue I have is that the search box doesn't align with the image of the search button, even though they are the same height, and all elements (the input, the image, and its containing div) have 0 padding and 0 margin.

I tried to put a top-margin of 2px on the image, that lowered the whole thing. Besides, it doesn't look exactly the same in IE7, Firefox and Chrome, so I don't want to start pixel-adjusting for each browser.

Does anyone have any clue what I could do to fix this?

How do you vertically align some larger sized text with an image that is floating left inside a div?

The image is 152px in height and I set the div height to be 162px so there is padding of 5px around the image.

Artoo

I am designing this page:

theticketsguide.com/sample

Scroll down to where the text reads, "Easy Navigation." I have (more or less) managed to vertically align this text with the image next to it, but I used padding instead of a cleaner, more exact "vertical-align" function. I've tried to put

vertical-align:middle

for the text, but it doesn't do anything. Any help as to what the right solution is to this? I don't want to use padding.

Thanks,

Brandon

I have an image and to the right of it I have text. I want the text to be aligned veritcally to the middle of the image.

I can do the following and it works:

Code:

.icon {vertical-align: middle;}

<a href="index.php"><img src="images/icon.png" class="icon" border="0" /></a>
Header Goes Here

However, if I wrap H1 tags around "Header Goes Here" the text drops below the image.

Any ideas on how to use header tags and have it aligned? I know I could make the icon as a background with H1 but I want it to be clickable.

Is there any way to make it so the H1

Is there any style you can apply directly to an image to vertical align it at the top or the bottom?

I've tried margin: 0 auto; and that didn't work.

I have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left.

Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right.

Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this.

html code

Code:

<div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div>

css tags:
Code:

.wide_column_header {
  float:left;
  width:558px;
  margin:0 0 0 5px;
  background-image:url(../images/wide_header.jpg);
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;
  color:#fff;}

.headerbartext {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-left:15px;
  line-height: 140%;}

.headerbartextright {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-right:15px;
  line-height: 140%;}

I have a problem where my image on top there is a little gap below it. This only happens in Internet Explorer and not Mozilla; i wish to rid of that gap. Also I am wondering how would I align the text on the right, i have tried applying the vertical-align: bottom but it does not work. Here is the link: http://www.bluebushel.com/temp/real.html The code is below.

MARKUP
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xml:lang="en">
 <head>
  <title>Bluebushel | The bushels are alright</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="includes/bluebushel.css" />
 </head>

<body>

<div align="center">
<div id="topBar">
<div class="logo">
<img src="images/testimage.jpg" alt="Bluebushel" />
</div>
<div class="nav">
View Bushel | Account | Order Status | Shipping & Returns | Help
</div>
</div>

</body>
</html>

CSS
Code:

body						{
								background-color: #E9E9DF;
								margin: 0em;
}
a.nav:link,
a.nav:visited				{
								color: #000000;
								font-family: Arial, Verdana;
								font-size: .8em;
								text-decoration: none;
}
a.nav:hover					{
								color: #336699;
								font-family: Arial, Verdana;
								font-size: .8em;
								text-decoration: none;
}

#topBar					    {
								background-color: #FFFFFF;
								border-left: 2px solid #C5C5C5;
								border-right: 2px solid #C5C5C5;
								border-bottom: 1px solid #EEEEEE;
								height: 5.79em;
								margin: 0em;
								padding: 0em;
								width: 50em;
}
#topBar .logo				{
								float: left;
								text-align: left;
}
#topBar .nav				{
								color: #E3E3E3;
								float: right;
								font-family: Arial, Verdana;
								font-size: .73em;
								height: 100%;
								text-align: right;
								vertical-align: middle;

Thank you for your time.

I can usually figure out most CSS problems but this one is a mystery.

The following creates a curved box by covering the corner with an image. The problem is in IE6.0, the corner images do not align at the top but display about 10 pixels below it, so therefore I have a the box line and corners at the top and then the curved corners below it. Other browsers display fine, including IE7.0.

Why is it doing this?

Here is the CSS:

Code:

<style type="text/css">
.contain {
position:relative; top:0; left:0; text-align:left; padding:0; border:1px solid #ccc; margin:0 0 10px 0; background-color:#fff; vertical-align:top;
}
.corner-top { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; top:-1px; right:-1px; background:transparent url(/images/crn_tr_bb.gif) no-repeat top right;}
.corner-top .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background:transparent url(/images/crn_tl_bb.gif) no-repeat top left; }
.corner-bottom { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; bottom:-1px; right:-1px; background: transparent url(/images/crn_br_bb.gif) no-repeat bottom right;}
.corner-bottom .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background: transparent url(/images/crn_bl_bb.gif) no-repeat bottom left; }
</style>

<div class="contain">
	<div class="corner-top"><div class="corner-left"></div></div>
    <div class="intro" style="position:relative;"><p>Text here...</p>
	<div class="corner-bottom"><div class="corner-left"></div></div>
    </div>