|
CSS - Blog Userpic Placement Problem
First I am a copy/paste kinda chick w/ not a lot of experience but I do know enough to know that if you want something to look a certain way or act a certain way, there is someone out there saavy enough to get it right :-) On my LiveJournal blog, my style that I am using has the individual userpics/icons by default aligned to the left w/ text right up next to it and wrapping around it. I would like it to by default w/ hopefully some css code, to automatically be beneath the icons. Currently I'm simply inserting br tags (hitting the enter key) when I post a new entry to force my text beneath the icon but I know there must be a way to force it to do what I want it to. The folks at LJ are NOT very helpful and they have this funky layers thing going on as opposed to simply wysiwyg or blank html/css coding pages. You have to learn their system before you do any altering but they do have a place for just adding simple css code changes. First, is this possible and second can someone pleaasseee help? Thanks so much in advance!!! Oh the url is: http://nitamcgrew.livejournal.com/
Similar TutorialsHello nice people. I'm new and excited to be here. My footer that is supposed to be placed at the bottom of my content and sidebar is placing it self about 600px or so below instead, causing a ridiculously long scroll down with a huge empty space in between the posts and the footer. Just looks awful. I can't figure out what's 'causing the problem. How do I fix this? I think the problem lies in these set of CSS, but I could be wrong... My blog is: thetissuetalk (at) blogspot (dot) com Code: /* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width:1000px;
margin:0px auto 0px;
padding:8px;
text-align:left;
}
#content-wrapper {
width: 1000px;
}
#main-wrapper {
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
margin:30px 250px auto 115px; padding:0 120px 0 0;
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
position:relative; top:-6600px; right:40px; padding:20px 20px 0px 5px; width:220px; color:#333; background:#F0F0F0; font:normal 12px/14px "Trebuchet MS","Lucida Grande","Lucida Sans Unicode",Arial;
}
#menu { width:167px; margin:0px 0 40px 30px; padding:0; text-align:center; }
#menu ul { padding:0; margin:0; }
#menu li { font:bold 12px/14px Arial,Helvetica,"Trebuchet MS"; letter-spacing:2px; list-style:none; margin:-3px 0; padding:5px 0; }
#menu li a, #menu li a:visited { display:block; color:#FAFAFA; background:#D0D0D0; text-shadow:0 0 4px #FAFAFA; margin:0 2px 0 1px; padding:5px 5px 4px 5px; border:0; text-decoration:none; text-transform:uppercase; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }
#menu li a:hover { color:#fff; background:#C5C5C5; text-shadow:0 0 3px #B5B5B5; }
#menu .current_page_item a, #menu .current_page_item a:visited { color:#fff; background:#C5C5C5; text-shadow:0 0 3px #B5B5B5; }
#menu ul ul li { margin:3px 2px 0 10px; padding:0; line-height:11px; }
#menu .rss a, #menu .rss a:visited { color:#B3B3B3; background:#ddd url(http://2.bp.blogspot.com/_k_DnmK4oz2Q/S1u4oxWZhnI/AAAAAAAAAkQ/rkns3Lq9mC8/s1600/rss.png) no-repeat 37px center; text-shadow:0 0 0; padding-left:20px; }
#menu .rss a:hover { color:#A9A9A9; background:#E7E7E7 url(http://2.bp.blogspot.com/_k_DnmK4oz2Q/S1u4oxWZhnI/AAAAAAAAAkQ/rkns3Lq9mC8/s1600/rss.png) no-repeat 37px center; text-shadow:0 0 0; }
Thanks! Here trying to learn CSS and needed a menu to go under a logo on my page, I can't however get it in the right position. If anyone could help me i would greatly appreciate it. the problem is the #cssmenu codeing i think. 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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
<title>Northwest CT YMCA - We Build, Strong Kids, Strong Families, Strong Communities.</title>
#container { width: 900px; margin: 0 auto; }
body { background: #fff url('http://www24.brinkster.com/mattphat/images/body.gif') top repeat-x; font-family: Arial, Helvetica, sans-serif; }
#header { height: 300px; position: relative; }
#header h1 a { display: block; text-indent: -5000px; width: 606px; height: 125px; background: url('http://www24.brinkster.com/mattphat/images/logo.gif') no-repeat; position: absolute; left: 20px; top: 30px; }
#header2 { display: block; width: 769px; height: 32px; background: url('http://www24.brinkster.com/mattphat/images/winterprograms.gif') no-repeat; position: absolute; left: 20px; top: 250px; }
#header2 h1 {padding-top: 20px; padding-left: 20px; color: #777; font-size: 16px;}
#header2 h1 a {color: #5c91c7;}
#header2 h1 a:hover { color: #386da4; }
#cssmenu {list-style: none; padding: 0px;}
#cssmenu .displace {position: absolute; top: -90px; left: -5000px;}
#cssmenu li {float: left;}
#cssmenu li a { display: block; width: 150px; height: 44px; background: url('images/links.gif');}
#cssmenu li.Torrington a { background-position: 0 0; }
#cssmenu li.Winsted a {background-position: -150px 0;}
#cssmenu li.Cannan a {background-position: -300px 0;}
#cssmenu li.Torrington a:hover {background-position: 0 -43px;}
#cssmenu li.Winsted a:hover {background-position: -150px -43px;}
#cssmenu li.Cannan a:hover {background-position: -300px -44px;}
#cssmenu li.Torrington a:active {background-position: 0 -88px;}
#cssmenu li.Winsted a:active {background-position: -150px -88px;}
#cssmenu li.Cannan a:active {background-position: -300px -88px;}
#cssmenu li.Torrington a.selected {background-position: 0 -132px;}
#cssmenu li.Winsted a.selected {background-position: -150px -132px;}
#cssmenu li.Cannan a.selected {background-position: -300px -132px;}
#utility-nav { position: absolute; right: 20px; top: 40px; }
#utility-nav li { display: inline; }
#utility-nav li a { display: block; float: left; font-size: 11px; color: #ffffff; text-decoration: none; padding: 0 5px; background: url('http://www24.brinkster.com/mattphat/images/utility_nav_divider.gif') left no-repeat; }
#utility-nav li a:hover, #utility-nav li a.active { color: #E9F5FE; text-decoration: underline; }
#utility-nav li.first-item a { background: none; }
#sub-header { background: url('http://www24.brinkster.com/mattphat/images/sub_header.gif') no-repeat; width: 900px; height: 60px; position: relative; padding-top: 43px; margin-bottom: 20px; }
p.breadcrumbs { font-size: 15px; color: #E13040; position: absolute; top: 9px; left: 20px;}
p.breadcrumbs a {color: #5c91c7;}
#images { background: #fff; height: 111px; }
#images li { display: block; float: left; margin: 1px 1px 0 0;}
#images li.first-item { margin-left: 1px; }
#images li.last-item { margin-right: 0; }
#directory ul { width: 159px; float: left; padding: 10px 0 0 20px; }
#directory ul li { background: url('http://www24.brinkster.com/mattphat/images/directory_bullet.gif') left no-repeat; padding-left: 8px; }
#directory ul li a { font-size: 11px; color: #666; text-decoration: none; line-height: 1.6; }
#directory ul li a:hover, #directory ul li a.active { border-bottom: 1px dotted #333; color: #333; }
#sidebar { width: 247px; float: left; padding-left: 20px; margin-right: 20px; }
#sidebar h2, #main-content h2 { font-size: 20px; color: #2e9eff; margin-bottom: 5px; text-indent: 8px; }
#sidebar ul { background: #f4f4f4 url('http://www24.brinkster.com/mattphat/images/sidebar_li.gif') top repeat-x; }
#sidebar ul li { padding: 10px; background: url('http://www24.brinkster.com/mattphat/images/sidebar_li.gif') bottom repeat-x; line-height: 1.4; }
#sidebar ul li img { float: left; padding: 1px; border: 1px solid #ddd; margin-right: 8px; }
#sidebar ul li h3 { font-size: 11px; font-weight: bold; color: #ee912a; }
#sidebar ul li p { font-size: 11px; color: #999; }
#sidebar ul li a { background: url('http://www24.brinkster.com/mattphat/images/read_more.gif') left no-repeat; padding-left: 12px; color: #5c91c7; font-size: 11px; }
#sidebar ul li a:hover { color: #386da4; }
#main-content { width: 592px; float: left; margin-bottom: 20px; }
.article-wrapper .article-actions { background: url('http://www24.brinkster.com/mattphat/images/article_actions.gif') top repeat-x; height: 34px; font-size: 11px; color: #999; padding: 10px 0 0 8px; }
.article-wrapper .article-actions li { display: inline; margin-right: 10px; }
.article-wrapper .article-actions li img { vertical-align: middle; margin-right: 6px; }
.article-wrapper .article-actions li a { color: #666; }
.article-wrapper .article-actions li a:hover { text-decoration: underline; }
.article-wrapper .article { width: 574px; margin: 0 auto; }
.article-wrapper .article h3 { font-size: 16px; font-weight: bold; color: #ee912a; margin-bottom: 2px; }
.article-wrapper .article p { color: #666; font-size: 12px; line-height: 1.6; margin-bottom: 10px; }
.article-wrapper .article strong { font-weight: bold; }
.article-wrapper .article em { font-style: italic; }
.article-wrapper .article p a { color: #5c91c7; }
.article-wrapper .article p a:hover { color: #3b6691; }
#footer { background: url('http://www24.brinkster.com/mattphat/images/footer.gif') no-repeat; width: 898px; height: 80px; margin: 0 auto 10px auto; clear: both; padding-top:13px; position: relative; }
#footer p { font-size: 11px; color: #999;}
#footer p.copyright { text-align: center; }
#footer p.copyright span { color: #5c91c7; }
#footer p.authors { position: absolute; right: 25px; top: 14px; }
#footer p.authors a { color: #5c91c7; text-decoration: none; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="#">Health Life</a></h1>
<ul id="utility-nav">
<li class="first-item"><a href="#">About us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Support the Y</a></li>
</ul>
<!-- //#main-nav -->
</div>
<!-- //#header -->
<!-- //#sub-header -->
<div id="cssmenu">
<li class="Torrington"><a href="#" title="Home"><span class="displace">Home</span></a></li>
<li class="Winsted"><a href="#" title="Blog"><span class="displace">Blog</span></a></li>
<li class="Cannan"><a href="#" title="Contact"><span class="displace">Contact</span></a></li>
</div>
<div id="sidebar">
<h2>Quick Links:</h2>
<ul>
<li class="clearfix">
<img src="YMCA/logo.png">
<br><br><br><br><p>"Ive regained and maintained my mental capacity from 10 years earlier. I look forward to every day now with an open mind and new possibilities."<br>
<b>JoAnn Baird, age 67</b><br>
Program Graduate<br>
<br>
<font color="red"><b>Think Faster, Focus Better, Remember more.</b></font></p>
<a href="http://www.northwestctymca.org/PDFs/Final%20Brain%20Fit%20Brochure.pdf">Read more</a> </li>
<li class="clearfix"> <img src="YMCA/ymca-logo.jpg">
<h3>Virtural Tour</h3>
<p>Before you join please feel free to take a virtural tour of our 3 branches by clicking the links below.</p>
<a href="http://www.flickr.com/photos/44211805@N04/sets/72157622709363760/show/">Torrington</a>
<a href="http://www.flickr.com/photos/44211805@N04/sets/72157622709343912/show/">Winsted</a>
<a href="http://www.flickr.com/photos/44211805@N04/sets/72157622610891891/show/">Cannan</a>
<li class="clearfix"> <img src="YMCA/hugs.JPG">
<h3>Childcare</h3>
<p>Our Torrington and Winsted branchs both offer quality childcare services to the public. To read more information about childcare at the Y! click below. </p>
<a href="#">Read more</a> </li>
</ul>
</div>
<!-- //#sidebar -->
<div id="main-content">
<h2>Northwest YMCA Latest News:</h2>
<div class="article-wrapper">
<ul class="article-actions">
<li><img src="images/category.gif" alt="" /> <a href="#">My Healthy Life</a></li>
<li><img src="images/date.gif" alt="" /> 24.12.2008 at 23:00h</li>
<li><img src="images/author.gif" alt="" /> <a href="#">YMCA Webmaster</a></li>
<li><img src="images/comments.gif" alt="" /> <a href="#">32 Comments</a></li>
</ul>
<div class="article">
<img src="YMCA/my%2520healthy%2520life%2520logo.jpg" alt="" /><h3>Northwest YMCA ~ My Healthy Life ~ New in 2010!</h3>
<p>The Northwest YMCAs my healthy life program is a personalized health and wellness program included with your YMCA Facility Membership. The YMCA is your health partner, providing you with the proper education, motivation and healthy activity routines to help you reach your fitness goals.
Best of all, theres a step-by-step program for everyone! Each program will feature workout routines and educational information, guidance, and support sessions with your YMCA Wellness Coach. Its easy, select from one of our four my healthy life programs: <b>Trim, Momentum, Spark or Firm.</b> <a href="http://www.northwestctymca.org/PDFs/My%20Healthy%20Life%20Brochure%20FINAL.pdf">Click Here for More Details!</a><p>
</div>
</div>
<!-- //.article -->
<div class="article-wrapper">
<ul class="article-actions">
<li><img src="images/category.gif" alt="" /> <a href="#">Welcome</a></li>
<li><img src="images/date.gif" alt="" /> 24.12.2008 at 23:00h</li>
<li><img src="images/author.gif" alt="" /> <a href="#">YMCA Webmaster</a></li>
<li><img src="images/comments.gif" alt="" /> <a href="#">32 Comments</a></li>
</ul>
<div class="article">
<h3>*NEW* Year ~ *NEW* Website </h3>
<p>Welcome to a new year and a brand new site for the Northwest YMCA. Please bare with us while we work out the kinks, in our effort to bring you a more interactive and informative website.
<br><br>
</p>
</div>
</div>
<!-- //.article -->
</div>
<!-- //#main-content -->
<div id="footer">
<p class="copyright">2009 Northwest Connecticut YMCA.<br>The YMCA is a 501(c)(3) not-for-profit social services organization dedicated to <br>building strong kids, strong families and strong communities.</p>
<!-- //#footer -->
</div>
<!-- //#container -->
</body>
</html>
hi, i'm trying to add an outer glow image to my site, starting about a 100px from the top. when i use padding on the element i'm adding the trim to, the entire site including the banner shifts down. so i tried using background position, which works until i add repeat-y, which causes it to repeat in the 100px where i don't want it. is there a way to make an image only repeat down? Hey everyone, I'm redesigning a site and I'm running into some problems in firefox with the placement of the header-background image. The problem is that firefox places the image about 15 pixels below the intended area. When I add a border of 1 pixel to the header div firefox places the image correctly. I don't have this problem when viewing the site in IE. I've coded the following XHTML and css: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ParaCentrumEeldeHoogeveen</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Language" content="nl" />
<link rel="stylesheet" href="css/layout.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
</div>
</body>
</html>
And the css file: Code: html {
padding: 0px;
margin: 0px;
}
body {
background: #3a60db url('../gfx/background.jpg') repeat-x;
font-family: arial, "lucida console", sans-serif;
font-size: 12px;
color: #000000;
text-align: center;
margin: 0px;
margin-top: 0px;
padding: 0px;
}
#container {
border: 0px solid #ff0000;
width: 760px;
margin: 0px auto;
padding: 0px;
text-align: left;
}
#header {
background: url('../gfx/header.jpg') no-repeat;
height: 238px;
width: 760px;
padding: 0px;
margin: 0px;
}
Screenshot of the problem Does anybody know what the problem is? Thanks in advance. Grtz. Arjen I'm relatively ignorant about css and html, but I've faked my way along so far. But I've encountered a problem. I designed a style for a blog on LiveJournal, and it looks OK there. (http://www.livejournal.com/users/javajed/). I've also put a small bit of JavaScript in my website to embed my blog there. (http://www.jaredvoss.com/). On my website, the embedded blog is all screwy. All three DIVs should be contained within the scrolling layer, but only two of them are. Originally the sidebar DIV was even hidden behind the layer it's embedded in (I brought it forward using a z-index code). It seems like the sidebar DIV is taking it's position cues from the main body of my site, while the other DIVs are taking their position cues from the layer they're embedded in. I want all three DIVs to be aligned as they are on LiveJournal, and contained within the scrolling layer on my website. Any ideas? I've tried using wrapper divs and container divs (maybe not correctly) without success. Thanks for any help! Hi, I have modified a form for a web blog for a friend, and got extra fields included for them. But we have an issue on the pc with internet explorer and the position of the elements in css. On safari and opera and firefox, all the labels for the form tags line up correctly, but on internet explorer they do not, the message label is lined up with the address, how can we fix this. If you look at this page: http://website-traffic.inpress.co.uk/contact-us/ You can see what we mean with the form. How can I fix this problem with the css to get them all correctly lined up. Many thanks Barry Below is my html in which I want to embed "legend" 30px to the right of "map". After much playing with the code, I need help. "legend" is pushed underneath "map" in this version. Other arrangments have also failed. If I get rid of the "border" and "leg" div tags, they are placed side by side, but I have littile control over where "legend" is placed. Any insight would be appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <head> <title>CSS</title> <style type="text/css"> #page {position:absolute;border: 1px solid black;left: 20px;top: 20px;padding-top: 25px;padding-left: 25px;padding-right: 25px;padding-bottom: 25px} #printArea {position:relative;border: 1px dotted black;padding-right: 5px;padding-top: 5px;padding-left: 5px;padding-bottom: 110px} #leg{position:relative;border:1px solid black;width:170px;top:0px;right:0px} .map {position:relative;border:1px solid black} .legend {position:relative;top:0px;left:880:0px} </style> </head> <body> <div id="page"> <div id="printArea"> <div id="border"> <embed class="map" id="map" src="index.svg" width="850px" height="675px" type="image/svg+xml"/> </div> <div id="leg"> <embed class="legend" id="legend" src="legend/legend.svg" width="170px" height="625px" type="image/svg+xml"/> </div> </div> </div> </body> </html> Hi there, I'm having a FF/IE problem! As usual. I have a site up (www.silk-works.com)which thanks to BonRouge and Dan_A has a footer that sits in the correct position, ta peeps. The problem I have now is that - www.silk-works.com/jane/jane.html - I have Images floated right and I want text to appear alongside - which FF handles fine, but IE bumps below the first Image.. Code:
<img src="../photographs/jane01.jpg" alt="" id="containerImageRight"/>
<img src="../photographs/jane03.jpg" alt="" id="containerImageRight"/>
<p>some ample text....</p>
[CODE]
CSS for image placement is;
[CODE]#divWrapper #divContainer #containerImageRight {
margin: 0px 10px 10px 10px;
float: right;
border: 2px solid #6E6447;
padding: 0px;
}
CSS for <p> tag is; Code: #divWrapper #divContainer p {
font-family: "Gill Sans MT", Tahoma, Verdana, Arial, sans-serif;
font-size: 1.1em;
padding-left: 10px;
letter-spacing: 0.05em;
line-height: 1.3em;
padding-right: 10px;
color: #6E6447;
}
Any suggestions greeted with a free ice cream. Regards, James. Hi there. I'm working on a page, and I'm a bit confused about how to place my CSS on it. The page has a nutritional search box that will be the primary focus of the entire site. Right now I have only a front page. So currently I have one external CSS file with the CSS for the page layout, along with the CSS to arrange the search box. But now I want to bring up a javascript popup with just the searchbox and another table. I can't use my original external CSS because I don't want the main page naviagation in the popup, nor do I want to copy the CSS for the search box everywhere. What is the correct way to do this? I almost want two external css files. I want to include BOTH files in the main page, and only the file associated with the search box in the popup. But in the reading I've been doing it doesn't seem possible. Even when I try copying the CSS for the search box, Firefox doesn't seem to like me attaching a different CSS file in the popup then I had in the main page. Please help! Or at least point me to a useful article. Thank you! Can anyone tell me how I can move the navigation bar I'm using below so that it left aligns with the table below it? You can view the bar he http://oharenoise.org/2010_news_releases-2.htm I was told that the main nav element has a left: 75 px attribute attached to it but I can't seem to find it, embedded or on the external CSS. Maybe I'm blind? The CSS external sheet is found he http://oharenoise.org/ONCC_Style_Sheet.css Thanks, Rebecca Hey, guys. I've tried everything to get this to work. Basically the main content of our page is in a table centered on the page. We want a nice big skyscraper ad right next to the table that isn't aligned with the right portion of the page (because if it is, when the window is shrunk, the ad goes over top of the page content). How do I offset the ad position from the table? Will it work with different resolutions too? Right now I have the div tag inside the table, looking like this: Code: <div style="float:right; clear:none; margin:0 10px 0 0;"> <img src="structure/images/VendorAds/skyscraperAds/homepage/skyscraper01-Q2.jpg" width="160" height="600" /> </div> But it puts it all the way to the right next to the scroll bar, and it offsets the main content to the left. How do I get the ad to appear right next to the table without offsetting anything, and without moving over top of the content when the page is shrunk? Any help is appreciated. EDIT: I fixed my own problem. Since the main content was a table, I wrapped a table around the main content, put the ad in a <td> element, then one on the left side to recenter it. I'm brand new to CSS and I've been trying to customize a template, but it seems whenever I move the Search bar from the top left into the menu bar on the right side it offsets the placement of other items and I cannot for the life of me figure this out. My website is floydsewingmachines dot com (I guess it won't let me post the actual address?) but any suggestions or help would be greatly appreciated. Thanks! Hi, If you view the site below with IE, you'll probably notice that the main menu going across the top is somewhat off. By off, I mean it doesn't vertically align in the middle, but it does with Chrome. http://www.vitality-bodymindsoul.com/ Any idea what's causing this? Thanks much. Hi, I am trying to line up a few images at the top of this page: iamthelab dotcom The 2 rectangles need to be aligned to the top of the page and I can't for the life of me figure out what I am doing wrong. I'm sure the solution is simple. No help from other forums, maybe you guys can assist. Thanks! I'm sure this is some basic thing that's just slipped my mind. http://www.onlineeditions.com/opportunityhouse/ As you can see, it's rendered differently between FF and IE: the content column on the right has a few nested divs to hold background images, but on FF (And Safari) the "right" div seems to have slipped down and to the left a few pixels. Code and css is all valid, per w3c. If someone can help me find what's gone wrong here, I'd be most thankful. Hello, I'm new to the world of CSS. Hopefully that won't be TOO obvious to anyone looking at my code... Anyway, it hasn't taken long for me to find frustrations with IE. I'm having issues with elements on two pages of the site I'm working on: the index page (wiayouthmountainland.org ) and the apply page (wiayouthmountainland.org/apply.php ) On the index page there is some white text in the center of the page. It is where it should be in FF but is way over to the right in IE. On the apply page there are some textboxes on the right side of the page. Again, the placement is correct in FF, but they are too low in IE. I don't know if the same thing is causing the problems. I don't really know what it is I'm looking for. If someone wouldn't mind taking a look to see if they can figure out what is messing me up, I'd really appreciate it! Here is a link to the css: wiayouthmountainland.org/WIA.css . Thanks in advance! Jules Hello, My page when correct should show the HeaderContainer, blow that the ActionContainer which has, 3 column divs, then below that the FooterContainer. It is important that the page build starts with the CenterContainer, then the LeftContainer, then RightContainer. My issue is that the LeftContainer and RightContainer columns both are aligning to the bottom of each other, and to the bottom of the CenterContainer column. I think this could be an issue with floats. What do you think? See online demo, http://tlcgiftsandbaskets.com/demo/positioning/position_css.php Code:
body{
margin: 0pt; margin:0 15px 0 0;
text-align: center;
}
#Container{
position: absolute;
z-index:1;
width: 700px;
height:auto;
left: 50%;
margin-left: -350px;
border-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-color: #ccbbaa;
background-color: #ffffff;
text-align:left;
}
#ActionContainer { margin:0 0 0 0; text-align:left; border:1px solid orange; }
#CenterContainer { margin:0 0 0 175px; text-align:left; border:1px solid yellow; width:250px; }
#LeftContainer { margin:0 0 0 10px; text-align: left; width: 150px; border:1px solid green; float:left; }
#RightContainer { margin:0 0 0 450px; text-align: left; width: 150px; border:1px solid blue; float:right; }
#HeaderContainer { margin:0 0 0 0; width: 700px; height: 245px; border:1px solid red; }
#FooterContainer { margin:0 0 20px 0; padding:0 0 30px 0; border:1px solid blue; display:block; }
Code: <div id="Container"> <div id="ActionContainer"> <div id="CenterContainer">CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer.</div> <div id="LeftContainer">LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer.</div> <div id="RightContainer">RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer.</div> </div> <div id="HeaderContainer">HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer.</div> <div id="FooterContainer">FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, </div> </div> |
|||||||