Learn VBA & Macros in 1 Week!

CSS - Css Div Alignment Question/help

Full Excel VBA Course - Beginner to Expert

Css Div Alignment Question/help	View Content

Hi Guys,

I'm trying to get a messaging app done and I need the CSS polished up. I understand CSS enough to hack my way through it, but for some reason I can't get the following done.

Here's what I'm trying to create. This will be placed within an existing div that is 550px wide.

I see 5 total divs that need to be created.

The containing div, which is the thick border around the entire image.

The profile pic div

the name div

the timestamp div

the message div

The containing div can't be height restricted.
The profile pic div, name div, and timestamp div need to stay at the top.
The message div will need to grow (height-wise)

div.view_message_block
{
width: 550px; (or 100% since the containing div is already set to 550px?)
margin: .5em .5em .5em .5em;
display: inline;
}

div.view_message_profile_pic
{
width: 75px;
display: inline;
float: left;
}

div.view_message_sender_name
{
width: 80%;
display: inline;
float: left;
}

div.view_message_date
{
width: 20%;
display: inline;
}

div.view_message_body
{
width: 80%;
display: inline;
}

--------------------------------------------------------
Any help or guidance will be appreciated! Don't want it done for me, but I'm not sure where to go from here.

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Sidebar Alignment Question

Text Alignment Question

Another List Question.. This Time Alignment Problems

Simple Rollover Effect And Alignment Question

Top Bar Alignment

Div Alignment In Ie Again :(

Ie 6 Css Alignment

Css Alignment Help

Tableless Alignment

Alignment Issue -

How Can I Fix This Alignment Issue?

Beginner To Css - Alignment

Bottom Alignment

Image Alignment Help

Div Alignment Issue

Alignment Issue

Div Alignment Stress

Learn VBA & Macros for Excel in 1 Week!

Sidebar Alignment Question

Similar Tutorials

I would like to have a sidebar that vertically stretches to the height of its wrapper div. The sidebar contains two divs (a menu and a graphic) one of which is aligned to the top of the sidebar and one of which is aligned to the bottom. Thus when the sidebar stretches vertically, the space in between the menu and the graphic stretches.

I currently have a floated sidebar with a fixed width and relative postion. That sidebar is in a wrapper div that is also relatively positioned. There is a menu and a graphic (#mascot) inside of the sidebar. My current CSS only allows the sidebar to be vertically as big as the two items in it. Here is my CSS:

Code:

#wrapper {
	padding:0px;
	margin:5px auto 10px auto;
	border:solid 1px white;
	border-collapse:collapse;
	width: 800px;
	height:100%;
	position:relative;
}
#sidebar {
	margin:0px;
	padding:0px;
	width:220px;
	float:left;
	background:url(_images/team/bg_nav.jpg);
	position:relative;
}
#sidebar #menu {
	margin:0px;
	padding:0px;
	border:solid 1px #000;
}
#sidebar #mascot {
	margin:0px auto;
	padding:10px;
	text-align:left;
	background:url(_images/team/bg_mascot.jpg);
	font-size:10px;
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
	color:#000;
	text-align:center;
	border:solid 1px #000;
}
#mainContent {
	margin:0 2px 0 222px;
	background:#FFF;
	padding: 10px;
}
#footer {
	margin:0px;
	padding:0px;
	width:100%;
	background:url(_images/team/bg_footer.jpg);
	font-size:10px;
	font-weight:normal;
	color:#FFF;
	text-align:center;

}

I would really appreciate any help as I am relatively new to CSS. If the code is confusing I'd be happy to expound on anything.

Thans in advance,
Brian

Text Alignment Question

Similar Tutorials

I want some text aligned left, then some text aligned center, then some more text aligned right all on the same line. Should I use tables, divs, or is there a better way?

Thanks

Another List Question.. This Time Alignment Problems

Similar Tutorials

its not so much of a problem because i have "thought" of a remedy (at the end of the post) but i was looking for perhaps a more css'esque solution?
if you go here
http://www.zahra-zahra.com/fullpage.html

you will see menus in the middle somewhere and you will see when the lis go on the second line they are mismatched.. is there a way to match them up precisely?

now the solution which i was thinking was is that to have four arrays and then put them in four divs and then place them side by side.

btw: the menu will be stored in database

Simple Rollover Effect And Alignment Question

Similar Tutorials

Ok ive never really used this effect on any of my designs but i would like to. How do i make a <td> background color change on mouse over with css?? and also how would i align an image to the bottom right or bottom left part of a paragraph, i allready know how to do it to the top right and top left.

thanks in advance.

Css Alignment

Similar Tutorials

I have two columns (menu and content) and would like them to be horizontally aligned to the center sensitive to the size of the browser and relative to each other.

I have figured out how to do this with the content column (right one) but I'm having trouble doing this with the menu column. I would like it to be equally space relative to the placement of the content column.

Any help would be appreciated. Here's the code:

Code:

/ { 	margin: 0; 	padding: 0; }  
body { 	font-size: 12px; 	font-family: Helvetica Neue, Arial, Verdana, sans-serif; 	background: #F2F2F2; }  
body.section-1 { } 
body.section-2 { } 
body.section-3 { }  
a:link { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; color: #666; }  a:hover {      background-color: black;     color: #f2f2f2;  }  a img { border: none; }  

#menu {     width: 130px;     overflow: hidden;     top: 40px;     position: fixed;     height: 100%;     background-color: #e6e6e6;     text-align: left;     margin: 0px 0px 0 0px 180px;     left: 12%; }  

#menu ul { 	list-style: none; 	margin: 0px; }  

#menu ul li.section-title { }   
#content {     height: 150%;     width: 700px;      margin: 0 0 0 300px;     top: 40px;     position: relative;     background-color: white;     overflow: auto;     padding: 15px;      margin-left: auto;     margin-right: auto; }  .container {     padding: 0px; }  

#content p { width: 400px; margin-bottom: 15px; }  
p {     margin: 0 0 9px 0; }  h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 12px; }  

#img-container	{ margin: 0; padding: 0; } 

#img-container p	{ width: 400px; margin: 0; padding: 0 0 12px 0; }  #once { clear: left; }

Top Bar Alignment

Similar Tutorials

Been trying to get these divs to align but with no success.

Can someone be so kind to show me how to get the XHTML/CSS to look like the attachment below...

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<title>Top Bar</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
<![CDATA[/*>
</style>
</head>
  <body>
    <div class="bdr">
      <div class="lchief">
       IMAGE
        </div>
        <div class="rchief">
          <div class="stats">
            <div class="tmar">
              TBA
            </div>
            <div class="tmar">
              TBA
            </div>
            <div class="tnom">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tnom2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tnom2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tmar2">
              TBA
            </div>
            <div class="tnom2">
              TBA
            </div>
          </div>
          <div class="sidemenu">
            TBA<br />
            TBA<br />
            TBA<br />
            TBA<br />
            TBA<br />
            TBA<br />
            TBA<br />
          </div>
      </div>
    </div>
  </body>
</html>

TIA,
Taro

Css Alignment

Similar Tutorials

HI,

I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows:

Code:

.row {
  height: 30px;
  vertical-align: text-top;
}

.formField {
  border: 1px solid #666;
  width: 150px;
  background: #FFFFFF;
  color: #000000;
}


<body>

   <div class="row">
   xxxxx: <input type="text" class="formField">
   </div>
 
</body>

The textbox is sitting just above the text. How can I get them lined up properly?

Div Alignment In Ie Again :(

Similar Tutorials

hey all... i have got a prob with a area in IE. It looks great when the users browseer is fullscreen and no favourites/history etc window is open. However once the window is resized or fav's are turned on then the content div drops to the bottom works fine in Moz FF but can't make it work in IE..

any ideas from anyone would be really great. thanks

the link to the page is here

and for the css click here

thanks in advnaced !

RF

Ie 6 Css Alignment

Similar Tutorials

Hello...

Here is the site I'm having issues with ralphwall.com I'm noticing that it only happends in IE6 and not other browsers. It's shifting my float:right; column down the page.

Here is the code in my css. Could anyone please help? I'm starting to pull my hair out.

Thanks in advance.

body{
cursor:url("assets/mouse.cur");
background-color:#20110A;
overflow:hidden;
font-family:Georgia, "Times New Roman", Times;
font-size:14px;
color:#FEF5E0;
}
a:link{
color:#FEF5E0;
background-color:#7E5F33;
}
a:visited{
color: #FEF5E0;
background-color: #7E5F33;
}
a:hover{
color: #7E5F33;
background: #FEF5E0;
}
img{
border:0;
}
ul{
list-style-type:square;
}
#header{
float:left;
width:90%;
padding-left:5%;
padding-right:2.5%;
}
#header h1{
font-family:Georgia, "Times New Roman", Times;
font-size:36px;
font-style:italic;
color:#7E5F33;
}
#topnav{
float:right;
width:95%;
padding-right:2.5%;
text-align:right;
border-top: solid #7E5F33;
}
.hovermenu ul{
padding-left: 0;
margin-left: 0;
height: 16px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 2px .5em;
text-decoration: none;
float: right;
color: #FEF5E0;
background-color: #7E5F33;
border: 2px solid #7E5F33;
}

.hovermenu ul li a:hover{
background-color: #20110A;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
#left{
float:left;
width:20%;
padding-left:5%;
padding-right:2.5%;
}
#right{
float:right;
width:60%;
padding-left:5%;
padding-right:2.5%;
text-align:left;
verticle-aling:top;
}
#right h1{
font-family:Georgia, "Times New Roman", Times;
font-size:24px;
font-style:italic;
color:#7E5F33;
}
#footer{
float:right;
width:95%;
padding-right:2.5%;
font-style:italic;
text-align:right;
}

Alignment Help

Similar Tutorials

I am working on a site that I have taken over development of and there is an alignment problem here any ideas on what the problem is or how to fix it? Thanks!

Css Alignment Help

Similar Tutorials

Hi,

I am trying to convert my table design to CSS and building the bare structure now but having some troubles with the alignment/layout.

I want to move the left and right columns under the header div. but with float: left, they keep sticking to each other.

here is the link:

http://www.internationalnannies.com/test/

here is my CSS:
Code:

/* Structure setup */

#header {
	background-color: Aqua;
}

#body {
	background-color: grey;  	
}


#leftColumn {
	background-color: silver;
	float: left;
  width: 150px;
  position: relative;
}

#rightColumn {
	background-color: blue;
	float: left;
  width: auto;
  position: relative;
}

#footer {
  background-color: pink;
  clear: both;
  position: relative;
}

#photo {
  background-color: grey;
  margin-right: 5px;
  float: left;
  position: relative;
}

#headerRightContent {
  background-color: red;
  position: relative;
  float: left;
}
/* *********************************** */

and here is my html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
  <head>
    <title>index</title>
    
    <style type="text/css">
      @import "styles.css";
    </style> 
    
  </head>
  
  <body>
  
    <div id="header">
    
      <div id="photo"><img src="images/noImage.gif" width="120" height="160" alt="noImage (1K)" /></div>
      <div id="headerRightContent">right content</div>
    
    </div>
    
    <div id="body">
      <div id="leftColumn">left</div>
    
      <div id="rightColumn">right</div>
    </div>
    
    <div id="footer">footer</div>
  
  </body>
</html>

Can someone do a quick review of this and comment?

Thanks,
Edwinx

Tableless Alignment

Similar Tutorials

Does anyone know how to do the following without tables - I need to align some text to the left, some in the center, and some on the right, all on the same line: E.g.

Code:

----------------------------------
LEFT        CENTER        RIGHT
-----------------------------------

I messed around with float, but the text to be aligned to the right always appears on the line below.

Thank you for any help you may provide

Alignment Issue -

Similar Tutorials

Hi guys,
I've been desperately trying to get this to work but realised I have to ask for help.

www johnbradbury com

This looks right in Internet Explorer 7, the header bar is at the top and stretched across the whole screen. In earlier versions this is pushed down etc....

Anyone point me in the right direction?

How Can I Fix This Alignment Issue?

Similar Tutorials

Hi there,

I want to make the text in my post content to align left and take the same width as the image (448px). I have changed the CSS of the post content, but all that happens is the posts get more un-aligned as you go down, as if the new 'left' alignment ruins the centering of everything.

I'm using wordpress.

Does anyone have any suggestions as to why this is happening, and how I can align my content text to the left?

Thanks.

Beginner To Css - Alignment

Similar Tutorials

So here is my current code:

Code:

body {
	color: gold;
	background-color: black;
}

#main {
	align: center;
}

#header {
	width: 600px;
	height: 150px;
	border: 1px solid;
	background-image: url('http://localhost/web/css/images/header.jpg');
}

#links {
	width: 600px;
}

#links ul {
	vertical-align: center;
}

#links ul li {
	padding-left: 10%;
	display: inline;
}

#content {
	border: 1px solid;
	text-align: center;
	width: 600px;
}

As the title said, I am a complete beginner to CSS, so any criticism on my code is always welcome. The HTML to go along with this:

Code:

<html>
	<head>
		<title>Test Corp Site</title>
		<link rel="stylesheet" type="text/css" href="corp.css" />
	</head>
	<body>
		<div align="center">
			<div id="header"></div>
			<div id="links">
				<ul>
					<li>Home</li>
					<li>Link 2</li>
					<li>Link 3</li>
					<li>Link 4</li>
				</ul>
			<div id="content">
				<h1>Testing</h1>
				<p>This is just a test to see if I can actually design
		   	   	   the corp website!</p>
			</div>
		</div>
	</body>
</html>

Screenshot

That's essentially what it creates. My question is this:

If you look at where the supposable links are supposed to go, you'll see that they are slightly crooked, more off to the right. Well I want them to be exactly centered. As you can see the div layer is defined as being only 600px wide, so I want the links to be centered inside that 600px box and retain their padding at the same time. I have tried using things like vertical-align but I can't seem to get it to center correctly. What am I doing wrong?

Bottom Alignment

Similar Tutorials

Current working file is he

http://ravenwave.com/clients/opi/

link to the css file is he

http://ravenwave.com/clients/opi/opi.css

The issue is that I have a background with an associated navigation bar that need to align bottom. I've got that part all figured out and working. However, the snag is that if the browser window is shrunken to a small vertical height, the bottom navigation bar (and associated background) keeps riding up and then gets mixed up with the other content. Conversely, if the page is extra long in content and so needs to scroll, then the bottom bar and background is aligned to the bottom of the window, rather than the page.

Obviously this has to do with absolute vs. relative positioning and is not working how I want it to work.

Right now I'm guessing that I need to switch to a relative postioning, but I'm hoping that maybe there are some other fixes that I don't know about. I've tried a few things, but am just kind of wasting time and need to get this figured out.

Thanks

Image Alignment Help

Similar Tutorials

Hi guys,

I was hoping someone could help?
I have the following css which controols the style for a larger image on hover function. (thumb - then large pic on hover)

I am having trouble positioning (vertically) the image, what can I usew to control it?

Code:


/* Popup Image Viewer */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #669933;
padding: 1px;
left: -1000px;
border: 1px ridged;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;

}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 135px; /*position where enlarged image should offset horizontally */

}

Div Alignment Issue

Similar Tutorials

Hello everyone.

Another episode of stupid CSS tricks here!

h-t-t-p://rewards.yarnell.openi.com/

This site looks good in IE8, Firefox, Safari, Chrome. Only older IE shows the rightmost DIV, the main content area, as underneath the rest of the page. This is not my first CSS only site, but for some reason, I can't figure out why it isnt displaying correctly in older IE. If you are using IE8 and need to see it broken, just throw the site into compatibility mode.

I have all the DIV styles in the source, not in a stylesheet to make it easy for anyone to help me with this.

I just know this is going to be something simple, and thank you in advance to anyone kind enough to give this a look!

Have a great day!

Alignment Issue

Similar Tutorials

Hey,

I have a three column fixed layout design. In the center, middle column, the boxes stack perfectly between the left and right columns. When the center column content's height exceeds the left and right column my problems beings; the center content'll hug the left, leaving it's center position.

Website please scroll to bottom

I've tried a variation of different techniques to try and fix my problem, but the solution's eluded me to no ends.

Can anyone help me?

Kind Regards
The Coder

Div Alignment Stress

Similar Tutorials

haloo thar! i cant get my a div to align centered - heres the code -

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<title>TRANSPARENT DESIGNS + V.2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
body {background-image: url('back.jpg'); background-repeat: repeat-x; background-color: #AFA893;}
.body {text-align: center;}
.iframe {text-align: center;}
.white {width: 744px; height: 540px; background-color: #FFFFFF;}
</style>
</head>
<body>
<div class="body">
<object type="application/x-shockwave-flash" data="header.swf" width="744" height="228">
<param name="movie" value="header.swf" /></object>
<div class="white"><iframe class="iframe" id="news" src="news.html" width="700" height="500" frameborder="0"></iframe></div>
</div>
</body>
</html>

in ie its perfect but in firefox the div holding the iframe is aligned left??? help. anyone. please?! x