|
CSS - Horizontally Aligning Two Divs
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. Similar TutorialsI 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. I have a full css site that im in the mits of creating. It has 3 colums across in the main part of the site as you will see in the link below that some of my divs dont seem to be lining up w/ the top of the page... http://www.pollutionpaintball.com/version3/dennis_wells.html I have the first column that contains the thumbnails floating right with a margin-left of the navgition width and the profile div width. Next I have the navigation floated left Then I have the profile section in a div w/ a left - margin the size of the navigations width... any pointers would help... I camped out this weekend and worked all day and night to build one of the more advanced forms that I need. I am really pleased with the results so far, at least in IE. It is not perfect. I am having some problems with how it looks in FireFox. It looks great in IE. However, in Firefox, you can see the sections are bleeding together. Each is in it's own DIV set as BLOCK. The sections are Core Details Features Description Contact/Shipping/Payment Promotion Brief example <div> <h2>Core</h2> content bla bla bla </div> <div> <h2>Details</h2> content bla bla bla </div> The H2 headers, the text is bleeding into the div of the section before it. In IE, it doesn't. in FF, it's all jumbled up. Here's a link to an .html file of the form. It should open up in any browser since it references CSS by url and graphics by url. Can anybody check and see if it is a quick fix? I'm not sure what the problem is. I don't have any extra cash at the moment so I'm stuck. I've been trying to figure out the problem all weekend to no avail. http://quotes.cybercon.net/classifiedsform.html Also, here are two pics. Screenshots from IE and FF. In the IE screenshot, you can see how I outlined each section. The H2 headline tag (core/details/description/feature) is bleeding into the previous section. http://quotes.cybercon.net/classifiedformIE.jpg http://quotes.cybercon.net/classifiedformFF.jpg Thanks! -Jason My site lines up fine on Firefox. However, when it loads on IE, my right most part of the page does not align properly. You can see my problem at dicebaseballdotorg. Any ideas or suggestions? I am trying to get these 2 divs, which are going to be acting as a "tab" off of the main layout of the page. The first one for Personal is working and displaying correctly as far as I can tell, but something is wrong with my Business one. It doesn't seem to be taking any of my styles for displaying that tab correctly, either that or the position is totally off. If anyone could help me out I'd greatly appreciate it. Here's the css: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
body {
margin: 0;
border: 0;
background: #ededed;
}
/*============================ Begin Layout Structure ============================*/
#wrapper {
width: 1024px;
min-height: 768px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: #ffffff;
}
#accountselector-wrapper {
position: relative;
float: left;
width: 100%;
background: #ededed;
}
#accountselector-home {
position: relative;
float: left;
height: 20px;
min-width: 100px;
line-height: 20px;
text-align: center;
background: #ffffff;
}
#acccountselector-business {
position: relative;
float: left;
height: 20px;
min-width: 100px;
line-height: 20px;
text-align: center;
background: url("accountselectorleft.png");
}
#headerwrapper {
position: relative;
margin-top: 5px;
width: 100%;
height: 300px;
}
#headerwrapper-left {
position: relative;
float: left;
min-width: 64%;
height: 100%;
}
#headerwrapper-left-logo {
position: relative;
height: 75px;
width: 100%;
background: #ffffff;
}
#headerwrapper-left-navigation {
position: relative;
background: #ffffff;
height: 25px;
width: 100%;
line-height: 25px;
}
#headerwrapper-left-banner {
position: relative;
height: 200px;
width: 100%;
border: thin solid #939393;
}
#headerwrapper-spacer {
width: 12px;
height: 100%;
float: left;
background: #ffffff;
}
#headerwrapper-right {
position: relative;
float: left;
width: 33%;
height: 100%;
border: thin solid #939393;
}
#headerwrapper-right-heading {
position: relative;
width: 100%;
height: 15px;
line-height: 15px;
}
#headerwrapper-right-customer{
position: relative;
width: 100%;
height: 185px;
}
#bodywrapper {
position: relative;
min-height: 478px;
width: 100%;
padding-top: 10px;
}
#bodywrapper-leftwrapper {
position: relative;
float: left;
height: 100%;
width: 20%;
}
#bodywrapper-leftwrapper-subnav {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-leftwrapper-news {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-rightwrapper {
position: relative;
float: left;
height:100%;
width: 80%;
}
#bodywrapper-rightwrapper-body {
position: relative;
height: 100%;
width: 100%;
}
And the html: Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test5.css" /> </head> <body> <div id= "wrapper"> <div id="accountselector-wrapper"> <div id= "accountselector-home">Personal</div> <div id= "accountselector-business">Business</div> </div> <div id= "headerwrapper"> <div id="headerwrapper-left"> <div id= "headerwrapper-left-logo">US Sonet Logo</div> <div id= "headerwrapper-left-navigation">Link1 Link2 Link3</div> <div id= "headerwrapper-left-banner">US Sonet Banner</div> </div> <div id= "headerwrapper-spacer"> </div> <div id="headerwrapper-right"> <div id="headerwrapper-right-heading">Manage My Account</div> <div id="headerwrapper-right-customer">Account Control Center</div> </div> </div> <div id="bodywrapper"> <div id="bodywrapper-leftwrapper"> <div id="bodywrapper-leftwrapper-subnav"><p>Link1</p><p>Link2</p><p>Link3</p></div> <div id="bodywrapper-leftwrapper-news" >News</div> </div> <div id="bodywrapper-rightwrapper"> <div id="bodywrapper-rightwrapper-body"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p></div> </div> </div> </div> </body> </html> Thanks I'm trying to recreate a header that was built using tables. Here is an example of the original header. This is how I want it to look using div. http://65.175.116.253/logo/html_head_p1.html Here is the code for the table based header Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </HEAD> <body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <basefont face="verdana"> <table width="780" height="68" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#004C91" align="center" valign="center" width="222"><img src="http://65.175.116.253/logo/logo.gif" width="196" height="49" hspace="10"> </td> <td bgcolor="#004C91" align="center" valign="center" width="600"> <img src="http://65.175.116.253/logo/banner.jpg"> </td> </tr> </table> </body> </html> Here is the header using the code with DIVs. http://65.175.116.253/logo/styletest.html Here is the code I have using divs. I'm confused as to how to align the images correctly in the divs... Can someone show me how to correct this? I put the style info in teh same document so it would be easier to read. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#headerlogo {
background: #004C91;
position: absolute;
width: 222px;
height: 68px;
top: 0px;
padding-left: 0px;
padding-right: 0px;
}
#headerbanner {
background: #004C91;
position: absolute;
width: 600px;
height: 68px;
top: 0px;
padding-left: 50px;
padding-right: 0px;
}
</style>
<title>Untitled</title>
</head>
<body>
<div id="headerlogo"><img src="http://65.175.116.253/logo/logo.gif">
<div id="headerbanner"><cfinclude template="banner.cfm">
</body>
</html>
I have these two blocks that need to be on the same row. As it is now, they are blocked into two seperate rows. What I'm trying to achieve, is to have the logo on the far left, where it is now. But, I'd like to have the Login text to the far right, just before the tiled background (sunflowers). I'm not sure how to fix this problem. Can anyone take a quick look? http://www.marginalspace.com/asif/index.php Hi guys, I am trying to display two forms with several elements on a page. I would like to place the two forms on the webpage so that one is displayed on the left and the other on the right of the screen. Something like this URL http://craigbaldwin.com/blog/wp-content/uploads/2008/12/52.jpg I have written the following test and the forms are placed correctly inside the left and right divs. Code:
<HTML>
<Head>
<style type="text/css">
div.wrapper {
position: relative;
clear: both;
width: 100%;
border : 1px solid #000000;
}
div.left {
float: left;
width: 50%;
background: #ffffff;
border : 1px solid #000006;
}
div.right {
float: right;
width: 50%;
background: #ffffff;
border : 1px solid #000001;
}
</style>
</Head>
<Body>
<div class="wrapper">Wrapper
<div class="left">Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box </div>
<div class="right">Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box </div>
</div>
</Body>
</HTML>
A couple of problems with the above. 1. In Internet explorer the divs are aligned correctly but in firefox it gets all messy. 2. As long as the window is maximised then i the divs are aligned vertically correctly. If i resize the browser window then they are no longer aligned vertically. Is there a way to make them always next to each other from left to right even if the window is resized? (try resizing the window for the example i showed above) Thanks I'm wworking on a CSS template and I'm trying to vertically align two divs.... one on top of the other with a five pixel margin between the two.... However, unless I use a bunch of HTML breaks (which will result in an uneven template), I can't figure out how to do it. I've tried to vertical-align them and etc. Any help is appreciated. Oh, I know my code could be a bit more clean, this is just a comp. I've also tested this on FF so far. I doubt IE will return favourable results either. My example: www.efacln.com/Untitled-1.html My CSS code: Code:
#container
{
MARGIN: 5px;
}
#header_container
{
border-color: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
BORDER-LEFT: none;
BORDER-RIGHT: none;
WIDTH: 100%;
}
#header_content
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
BORDER-TOP: none;
BORDER-BOTTOM: none;
WIDTH: 600px;
HEIGHT: 100px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
}
#kirk_news
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
WIDTH: 550px;
HEIGHT: 100px;
FLOAT: left;
POSITION: absolute;
MARGIN-TOP: 5px;
MARGIN-RIGHT: 2.5px;
}
#navigationblock
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: THIN;
WIDTH: 410px;
POSITION: relative;
FLOAT: RIGHt;
MARGIN-TOP: 5px;
MARGIN-LEFT: 2.5px;
}
#scott_news
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
width: 410PX;
MARGIN-TOP: 1 px;
MARGIN-TOP: 5px;
}
</STYLE>
Hang on to this post, I have found a couple of answers, so will post again when i get stuck! Charlie Hi All Need some help with a positioning/alignment problem - divs not vertically aligning with body background image in IE: http://www.flatsinbraunton.co.uk/ce/ 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=utf-8" />
<title>Colin Essery Carpets</title>
<style type="text/css">
html {
font-family:Helvetica,Arial,sans-serif;
}
body {
font-family:Helvetica,Arial,sans-serif;
text-align: center;
background-image:url(images/bg-body.jpg);
background-repeat:repeat-x;
}
#container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: left;
}
#logo {
position:absolute;
left:0px;
top:78px;
width:327px;
height:102px;
}
#headstrap {
position:absolute;
left:327px;
top:78px;
width:473px;
height:102px;
}
img {
border-style: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<a href="index.php"><img src="images/logo-main.gif" alt="Colin Essery Carpets - North Devon" width="328" height="102" /></a>
</div>
<div id="headstrap">
<img src="images/head-strapline.gif" alt="Colin Essery Carpets - North Devon" width="473" height="102" />
</div>
</div><!--END CONTAINER DIV -->
</body>
</html>
Any help welcome thanks Rich hi i would like to display some pictures on my site, and be able to scroll horizontally, i have simply listed the pictures in the xhtml and my css cose is below. at the moment the pictures still stack up vertically so the horizontal scroll bar cannot be used. can anyone help? thanks div.galleryscroll { height: 125px; width: 694px; position: absolute; top: 540px; left: 280px; z-index: +1; overflow-y: hidden; overflow-x: scroll; } 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> is it possible to center something vertically inside a container without the use of tables? I know you use text-align to center horizontally, but what is used for vertical alignment? vertical-align doesn't work. PHP Code: <div style="width:100% height:100%; text-align:center;"> <!-- code goes here --> </div> thanks goran. Hey, I've been doing a fair amount of research on centering a page vertically and horizontally with CSS, and before I begin constructing my page, I thought I'd get some input from you guys. Basically, the page is going to look like this Any advice would be greatly appreciated. Thanks! 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 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. 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 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 |
|||||||