CSS - Centering (horizontally And Vertically)

Question title:
A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically

Hello

I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google.

If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome.

I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample)

f.e
line 1 : value_one - ( some_text - value_two (right justified) )
line 2 : value_one - ( some_text - value_two (right justified) )
line 99:....
e.t.c

Column one has a fixed width of 32px.
'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically.

Finally I need the color behind column one be different then the column 2 and 3.

So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily.
But my problem is that when I scroll horizontally that my first column scrolls away to the left.

Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically?

http://erichalsten.com/

It shows up fine in Firefox/Opera/Safari, but in IE the vertical alignment is off. I'm working from this example, but it doesn't seem to do the trick. Does anyone have any input or a link they can reference me to? Thanks.

Hi, I'm new here. I wasn't sure if this was a javascript problem or a css (I'm thinking it's probably a css problem). I've been using css for about a year, all very straight forward until my friend asked me to make some changes to his site

Bascially what he wanted me to do is

1. vertically center the entire site to the browser window, and 2. also vertically center the title and caption for his photogallery

Below is a link to the site I'm working on
Code:

http://theo.mypreview.co.uk/gallery/test

I added some javascript that I found searching on google which isn't working quite right. This is the javascript code

Code:

(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
	return this.each(function(i){
	var ah = $(this).height();
	var ph = $(this).parent().height();
	var mh = (ph - ah) / 2;
	$(this).css('margin-top', mh);
	});
};
})(jQuery);

If you follow the link posted to the site I'm working on you should see 3 thumbnails, 1st thumbnail is a video which is my main struggle to center vertically. The other 2 thumbnails are for images. If you click on one of the thumbnails for a picture you will see how the title and caption align vertically (not quite center)* For some reason the div containing the main image content ignores the height so the margins are too big.

*Video is posted within the span class called "phototext" which is where the descriptions for the images appears.
side note - this javascript seems stop IE6 and 7 from loading the page

Thanks
Larss

I'm having trouble understanding how to vertically center an inline list in a div. Can anyone recommend some reading?

The list is used for a horizontal nav bar with a background. I've set the height of the div to 20px because that's the height of the bg image.

Also: Should the font specs be where they are (#nav ul) or maybe in the #nav section?

Here's the code:

Code:

#nav {
background: url(../images/nav_bg2.gif);
text-align: center;
overflow: hidden;
height: 20px;
}
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.75em;
display:inline;
margin:0;
padding:0;
}

Hi

I want to show database information with php for different items using <div> tags in manner that each run of the loop display three div in a row (horizontally) and then start a new row if more data is available, each div should show a thin border around it.

for this I have written the following code

PHP Code:
while($row=mysql_fetch_array($res)( { 
?>
<div text-align: center; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;>

<?php
echo "item id: " . $var . "<br>";
echo "price: " . $var . "<br>";
echo "dealer: " . $var . "<br>";
?>
</div>
<?php
} //end loop
?> 





but it displays each row in a new line.

please visit this http://www.dev411.com/typo/themes/?pp=8;pg=5 just to see an example of what I am talking about.

I wonder if anyone could help in this?

thanks

I need help aligning the flash block to the right of my site to the one on the left so that they are both on the same line.

gpostal.net is the website so you can see the flash blocks. See how one is at the bottom right? I'm trying to get that to the top right and closer to the one on the left.

having trouble centering a web site

what i want to precisely position elements in my site and i thought that i could put all the elements in to one div tag and make that centered. i can center it but the problem is when the browser is resized smaller that the content the site remains centered and center starts diserpering off the left edge. what i want it to do once resized smaller is for a horizontal scroll bar to appear and for content not to disappear on the left edge of the screen. i have half achieved this but now my content dose not stay in the main div

check out my example the "center1" div should appear inside the top light gray box but it dose not!
http://www.thehopeandanchor.net/nypd/layertest.htm

the 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" xml:lang="en" lang="en">
<head>
<title>redeem file</title>
<style type="text/css">
<!--
div#center1 {
/*position:absolute;*/
margin:0px auto;
top:10px;
width:600px;
height:47px;
background-color: #cccccc;
}
div#center2 {
position:absolute;
left: 50%;
margin-left: -300px;
top:80px;
width:600px;
height:47px;
background-color: #cccccc;
}
div#insidebit {
position:absolute;
left:50px; top:10px;
width:64px;
height:26px;
background-color: #eeeeee;
}
-->
</style>
</head>
<body>

<div id="center1">
<div id="insidebit">center1</div>
</div>

<div id="center2">
<div id="insidebit">center2</div>
</div>

</body>
</html>

I am trying to make to div tags enclosed inside another div tag align horizontally. I am trying to do this without absolute positioning. See image below

Any ideas? Thank you.

hello!
i'm trying to line up some text in my unordered list but haven't been able to figure out the CSS to make it look something like this: Code:

Accomplishments:

Job title		some job here
			another job
			yet another job

Duties			Designed company website.
			Proofread advertisements

Code:

<div id="resume">
	<h4>Accomplishments</h4>
	<ul>
		<li>Job title</li>
		<ul>
			<li>some job here</li>
			<li>another job</li>
			<li>yet another job</li>
		</ul>
			
		<li>Duties:</li>
		<ul>
			<li>Designed company website.</li>
			<li>Proofread advertisements</li>
		</ul>
	</ul>
</div>

so i tried doing stuff like Code:

div#resume ul li ul {
	position:absolute;
	top:-20px;
	left:50px;
}
div#resume ul li ul li{
	float:none
	position:relative;
}

i can't get the words, "Job title" to line up horizontally with the first list item, then have the list items listed vertically like in my example up top (i know it doesn't line up perfectly in here)
can someone correct my css??
thanks!
drGiggles

I haven't been able to find an answer to this anywhere and am hoping someone here can help.

I'm trying to space the text inside my navigation div so that it stretches evenly accross the div rather than being centered and having a bunch of space on either side.

Here's my current html...

Code:

<div id="navigation">
<p class="nav"><font color="#ffffff" face="verdana" size="3">
<img align="center" border="0" width="1" height="2" src="navdot.gif"><br />
Link 1 | Link 2 | Link 3 | Link 4 | Link 5
</font></p>
</div>

And my css...

Code:

#navigation {
width:750px;
height:30px;
background-image:url('navigation.gif');
background-repeat:no-repeat;
margin-top:0px;
}

Any help would be much appreciated. Thanks!


EDIT:

I think I got it figured out... well, it looks good on my end and I checked it across 6 larger browsers anyways. Here's the html now...

Code:

<div id="navigation">
<img align="center" border="0" width="1" height="2" src="navdot.gif">
<table align="center" border="0" width="750">
<tr><td width="150" valign="top">
<center><font color="#ffffff" face="verdana" size="3">Link 1</font></center>
</td><td width="150" valign="top">
<center><font color="#ffffff" face="verdana" size="3">Link 2</font></center>
</td><td width="150" valign="top">
<center><font color="#ffffff" face="verdana" size="3">Link 3</font></center>
</td><td width="150" valign="top">
<center><font color="#ffffff" face="verdana" size="3">Link 4</font></center>
</td><td width="150" valign="top">
<center><font color="#ffffff" face="verdana" size="3">Link 5</font></center>
</td></tr></table>
</div>

I used a 1x2px image to lower the text so it wasn't sitting right up against the top of the div, then I used a table inside of it and text without using paragraph tags.

There's gotta be a cleaner way of doing this though, isn't there? It looks great cross-browser, but I'm thinking there's gotta be a way to do this without a table.

dear all,

is it possible, using css or otherwise, to have a div on my page remian visible even when the page is scrolled hoizontally and the div goes out of view.

the div in question runs vertically down the left hand side of the page.

there are javascript menus i have seen that do this (albeit usually when scrolling vertically), but i wonder if it can be done with css.

many thanks, mark

I'm hoping I can get a bit of help addressing the display of an unordered list. I'm trying to view the list horizontally, and not vertically. Here is the code, and thanks in advance.

CSS --------------------------------
#pages {
margin-top: 12px;
float: right;
margin-right: 125px;
font: normal 14px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
color: #000;
}

#pages ul {
list-style-type: none;
margin: 0;
padding: .5em 0;
display: inline;
}

#pages li a {
display: block;
width: 1.5em;
height: 1.5em;
padding: 0;
text-align: center;
vertical-align: text-middle;
text-decoration: none;
}

#pages a:link, #pages a:visited {
margin: 0 10px 0 10px;
text-decoration: none;
color: #000;
}

#pages a:link#pagescurrent, #pages a:visited#pagescurrent {
border-bottom: 1px solid #000;
background: transparent;
color: #000;
}

#pages a:hover {
background-color: #949494;
color: #fff;
}



HTML --------------------------
<div id="pages">
<ul>
<li><a href="#" id="pagescurrent" title="next slide">1</a></li>
<li><a href="#" title="next slide">2</a></li>
<li><a href="#" title="next slide">3</a></li>
<li><a href="#" title="next slide">4</a></li>
</ul>
</div>

I've been playing around with centering an absolutely positioned div and in this post is the method I've come up with. I've tested it in firefox and IE but am curious as to whether it works in opera and if there are better ways of doing it.

The div needs to be absolutely positioned because I'm using top & bottom to set it's height.

Here's the code

Code:

<!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="en" xml:lang="en">
<head>
<title>Center Test</title>
<style>
	body
	{
		margin: 0px;
		height: 100%;
	}

	.centered
	{
		position: absolute;
		border: 2px solid black;
		width: 196px;
		background: orange;
		margin: auto;
		top: 100px;
		left: 0px;
		right: 0px;
		bottom: 100px;
		min-height: 50px;		
		height: expression((document.body.clientHeight < 250 ? 50 : document.body.clientHeight - 200 ) + 'px');
		left: expression('auto');
		right: expression(((document.body.clientWidth < 200 ? document.body.clientWidth - 200: document.body.clientWidth / 2 - 100 )) + 'px');				
	}
</style>
</head>
<body>
	<div class='centered'>
		I'm a centered absolutely positioned div.
	</div>
</body>
</html>

hi.
I built a flash website with a resolution of 1920x1200.
The background of this web is 1920x1200 and my actual website with menu and stuff is in the middle of it with a resolution of 1024x768.
How can i upload this website and in the browser to shown always the middle of the flash?
I hope this is possible.
thanks!