Results 1 to 6 of 6
Related
-
CSS two column problem Forum: CSS Forum
Replies: 5 -
Layout alignment problem Forum: CSS Forum
Replies: 16 -
nested table relative column alignment Forum: HTML Forum
Replies: 2 -
CSS Layout - 3 Column Plus Forum: HTML Forum
Replies: 3 -
Making two column layout work with IE Forum: CSS Forum
Replies: 6
-
04-16-2007, 07:54 PM #1
Need help with Alignment problem for two column layout
Hello,
I have a two column layout with a class that puts a gray box around text pertaining the the images on its left. For some reason, I cannot create a space between the two boxes so the gray boxes align with the middle of the image. I tried using a transparent gif separated by a <br/> , but that didn't work.
Any suggestions would be greatly appreciated!!
Thanks in advance!
Here is the html: http://www.kittelbergerdesign/JBarber/testpage.html
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>xxxxxxxxxx</title> <link href="testpage.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="wrapper"> <div id="banner"> <ul id="navigation"> <li><a href="index.html">contact</a></li> <li><a href="about.html">property search</a></li> <li><a href="portfolio.html">client services</a></li> <li><a href="testimonials.html">testimonials</a></li> <li><a href="services.html">Jan's portfolio</a></li> <li><a href="mainframe.html">about Jan</a></li> <li><a href="index.html" target="_top">home</a></li> </ul> </div> <div id="leftcol"> <img src="images/7378emainst.jpg" width="350" height="250" alt="7378 East Main St Lima" /> <br/> <br/> <img src="images/1839rochesterst.jpg" width="350" height="250" alt="1839 Rochester St" /> </div> <div id="rightcol"> <div class="textbox"> <p><strong>xxxxxxxxxxxxxxxxxxxxxxxx</strong></p> <p class="subheading">xxxx ccc ccc cc<br />vvvvvvvv</p> </div> <br/> <img src="images/trans.gif" height="100" width="3"> <br /> <div class="textbox"> <p><strong>xxxxxxxxxxxxxxxxxxxxxxxx</strong></p> <p class="subheading">xxxx ccc ccc cc<br />vvvvvvvv</p> </div> </div> <div class="clearit"></div> </div> </body> </html>
Code:/* CSS Document */ html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0; padding: 0; border: 0; } body { font-family: Arial, Helvetica, sans-serif; color: #333333; background-color: #000000; border: 0; padding: 0; margin: 0; } #wrapper{ width: 750px; margin-left: auto; margin-right: auto; border:0; background-image:url(images/sky.jpg); } #banner { height: 134px; width: 750px; background-image:url(images/banner.jpg); background-repeat:no-repeat; float: left; } #navbar li { display:inline; border:1px solid; margin:0 0 0 15px; padding:0 0 0 10px; line-height: 9em; float: left; } #navigation { padding: 0 1px 1px 5px; margin: 0 5px 5px 10px; font: bold 11.25px arial, sans-serif; } #navigation li { list-style: none; margin: 2px; display: inline; float:right; line-height: 22em; } #navigation li a:visited { color: #000000; } #navigation li a { padding: 0.5em 1em 0.5em 0.75em; text-decoration: none; } #navigation li a:link { color: #333; } #navigation li a:hover { color: #990000; text-decoration: underline; } .clearit{ clear: both; } h2 { font-size:18px; font-family: times; color: #333; font-variant: small-caps; letter-spacing: 4px; line-height: 200%; } #leftcol { float: left; width: 380px; margin-top: 20px; padding: 0; margin-left: 10px; vertical-align: top; } #rightcol { float: left; padding: 0; width: 340px; margin-right: 10px; margin-top: 80px; vertical-align: top; border: 1px; border-color: #000; } .textbox { background-color: #e7e7e7; width: 300px; height: 75px; float: left; padding: 10px; } p { color: #000; font:normal 18px times, serif; line-height: 1.5em; letter-spacing: .12em; } p.subheading { font:normal 16px times, serif; letter-spacing: .8px; line-height: 1.5em; } IMG.stylename { border: 3pt solid white; } .rule { width: 500px; text-align: center; margin-left:25px; margin-right: 25px; background-color: #990000; } #footer { height:51px; width:890px; background-image:url(images/barberfooter.jpg); background-repeat:no-repeat; }
Last edited by DeadMeatGF; 04-17-2007 at 06:33 AM. Reason: Added Code tags
-
04-18-2007, 09:05 AM #2bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: Need help with Alignment problem for two column layout
Hi there designkitt
unfortunately your link...
http://www.kittelbergerdesign/JBarber/testpage.htm...does not work.
-
04-18-2007, 01:56 PM #3
Re: Need help with Alignment problem for two column layout
Sorry about that. Try this:
http://kittelbergerdesign.com/JBarber/testpage2.html
Here is the css:
http://kittelbergerdesign.com/JBarber/testpage2.css
I've been playing around with this since I first posted and now my problem is in IE. My second column contains text that I put in a div class. Instead of lining up to the right of the corresponding house, it is aligning after the houses end. Any suggestions would be greatly appreciated.Last edited by designkitt; 04-18-2007 at 01:59 PM.
-
04-20-2007, 08:57 PM #4
Re: Need help with Alignment problem for two column layout
Problem solved... thank you anyway!
-
09-04-2007, 01:14 AM #5
Re: Need help with Alignment problem for two column layout
Hello,
I have problem with background position in CSS. I want to align image background in my div, but i used background position to control image background. It is showing warning in my rebuild.
Thank you,
Regards,
Pakistan Boy
Last edited by HTML; 09-07-2007 at 08:21 AM. Reason: sig removed
-
09-04-2007, 02:00 AM #6bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: Need help with Alignment problem for two column layout
Hi there pakistanboy,
I would suggest that you start a new thread for your problem and also supply a link to the problematic page.
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum