The layout that my client wants has 2 columns currently. Text on the left and images on the right on the main content area. The images are to be aligned with each paragraph of text. Is it best to have 2 columns or keep it as one column and use CSS to move the images over to the right of the text? I think 2 columns would be best but I am open to suggestions. Thanks.
I’d use a single column for it since the image complements the text (if I understood you correctly) and isn’t an aside or otherwise disattached from the paragraphs. I’d use a float instead of marking up the text and image separately in two different divisions.
I also would be inclined to have one column and just float the images to the right, although there are a few things to consider, such as:
- are the images aligned as you want in the image? I’d suggest having them all sitting level with the top of the paras beside them, or the floating idea will be trickier
- those horizontal lines will prove to be problematic (as demonstrated in another thread here today).
Based on those points, it might be better to divide the content into horizontal sections with text and image floated in different directions.
Can I set a width on the horizontal rule such as div class hr for the html and css would be hr width 610px. Would that work? I can try it and see but just checking first.
I also have noticed that when I designed the site, the content section has a white border around the outside so instead of a small image for the background I now have 3. content_top, content_mdl, and content_btm to keep the effect. The content-mdl is not repeating on the y axis. I am sure I have all opening and closing divs correct. I will upload the code again so everyone can see what is going on.
Never mind got it…had to add an overflow: hidden; on the content_mdl section.
Yes, it should work, although I don’t like using the hr for that—as it’s really a semantic element rather than intended for styling a page. Much nicer to use CSS borders etc.
As for the other issue, indeed, we need to see the live version. 
So instead of using hr how would I use the border? I would want it to be 610px wide. I don’t think I have ever used that before.
The border will be as wide at the element it’s applied to, so that’s a case for wrapping the paragraphs in their own div, giving it a width and floating it left. E.g.
.text-wrapper {
width: 610px;
border-bottom: 2px solid #0000ff;
float: left;
}
Googled it and added it…looks good.
I am having a problem now with the images floating on the right. I would like them to be in line with each section but the middle image and bottom images are not cooperating. Please take a look at the code and see what I can fix in order to get them aligned with the sections. Thanks. http://foxdenwebsolutions.com/wingsofhope/index.html.
This is probably not the best way to do it, but I created 3 different rtFs. This seems to work for now unless someone has a better idea.
I don’t know if it is because I am tired and need to step away from this site, or I am just really confused. I am having trouble getting the footer content to look right. On the image from the beginning of this thread, the footer will have 3 left nav links, 4 center nav links, and 3 right nav links. There will be image links to the FB and Twitter pages. Below that will be the copyright info and below that the designed by info. I don’t know if I set up too many classes but I am getting confused as to what controls what. I have uploaded the new code to my site. http://foxdenwebsolutions.com/wingsofhope/index.html. Please let me know what I have done incorrectly. Thanks.
The <p> around the middle image has a big top margin on it.
Start by florating those <ul>s at the top of the footer.
A couple of revised images for you in case you are interested.
Note that the heights are slightly different.
I opted for floats, too, until you sought vertically centered content within two columns of one row (as shown in the client’s picture). That requirement prompted, this all-too-conventional layout suggestion.
Followed the same pattern in part of the footer with the expectation that it won’t fly, as the footer content is not yet finalized. Simplicity, symmetry and centering are strong suits of table-cells. The low/no math feature is a plus.
Colorful outlines on this page are for layout testing and structural clarity. All are commented in css; some are “commented out” at the moment.
There is a styled <hr> tag on this page just to demonstrate that it can be done easily and occupies all of 4 characters on a line of html. The <div class=“”></div> methods looks better IMHO, though. “Semantics” seems like an inappropriate argument in this case.
This is a “boxy” approach that I often use because it is stable and incredibly easy to add another line of content (cut-n-paste-n-change-the-text-n-pic); no math.
The original images plus the two that I added are required. All css is on the demo page. (It’s been whacked, too.)
<!DOCTYPE html>
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?894803-Need-advice-on-layout
Oct 12, 2012 22:29
cgacfox
-->
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/wings2a-.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
body {
background-color:#d7aeff;
color:#000;
font:100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6, p {
margin:0;
}
.outer {
width:1143px;
margin:0 auto;
}
header {
background-color:#d7aeff;
background-image:url(images/header.png);
background-repeat:no-repeat;
height:218px;
}
h1 {
font-size:20px;
text-indent:-9999px;
}
h2 {
padding:12px 0px 0px 60px;
}
.nav_container {
background-image:url(images/nav2.png);
background-repeat:no-repeat;
height:91px;
overflow:hidden;
}
.nav_container ul {
padding:12px 0px 0px 30px;
margin:0px;
}
.nav_container li {
display:inline;
font-size:24px;
font-family:Calibri, arial, helvetica;
text-align:center;
padding:0px;
margin:0px;
}
.nav_container a {
color:#fff;
text-decoration:none;
float:left;
padding:0px 25px 0px 25px;
}
.nav_container a:hover {
color:#d7aeff;
}
.content_container {
background-image:url(images/content_mdl.png);
background-repeat:repeat-y;
}
.content_container .row {
outline:1px solid magenta; /* LAYOUT TESTING */
display:table;
margin-left:60px;
margin-right:50px;
}
.content_container .row div { /* div could be classed as "col1" */
outline:1px solid magenta; /* LAYOUT TESTING */
display:table-cell;
text-align:left;
vertical-align:middle;
padding-right:50px;
}
.content_container .row div + div { /* div could be classed as "col2" */
text-align:center;
padding-right:0px;
}
img {
display:block;
}
hr { /* not used. Included just to show that an hr tag can be styled */
width:610px;
margin:20px 0px 20px 50px;
}
.hline {
border:1px solid #bbb;
background-color:#000;
width:610px;
height:1px;
margin-top:20px;
margin-bottom:20px;
margin-left:50px;
}
.donate_link {
background-image:url(images/donate_button.png);
background-repeat:no-repeat;
text-indent:-9999px;
width:263px;
height:86px;
margin-left:175px;
margin-top:40px;
padding-bottom:35px;
}
p {
margin:.75em 0px;
}
.behope {
width:610px;
padding:20px 0px 0px 60px;
}
.footer_container {
background-image:url(images/footer2.png);
background-repeat:no-repeat;
height:402px;
overflow-:hidden;
}
.footer_container .row {
/* outline:1px solid cyan; /* LAYOUT TESTING */
display:table;
padding-top:30px;
margin:0px auto;
}
.footer_container .row div {
display:table-cell;
text-align:center;
vertical-align:middle;
}
.left,
.middle,
.right {
outline:1px solid magenta; /* LAYOUT TESTING */
width:340px;
list-style-type:none;
display:table-cell;
padding:0px;
margin:0;
}
.left li,
.middle li,
.right li {
color:#fff;
font-weight:bold;
font-size:16px;
font-family:Calibri, Arial, Helvetica;
text-align:center;
text-transform:uppercase;
text-decoration:none;
padding:0px;
margin:0;
}
.left li {
text-align:left;
}
.right li {
text-align:right;
}
.fb_link,
.twitter_link {
outline:1px solid magenta; /* LAYOUT TESTING */
padding:10px 30px;
}
.copyright,
.designBy {
/* outline:1px solid magenta; /* LAYOUT TESTING */
color:#6e6c64;
text-align:center;
margin:1em;
}
.copyright {
padding-top:30px;
}
a img {
border:none;
}
a:link {
color:#42413c;
color:#fff;
}
a:visited {
color:#6e6c64;
}
a:hover,
a:active,
a:focus {
text-decoration:none;
}
</style>
</head>
<body>
<div class="outer">
<header>
<h1>Wings of Hope for Pancreatic Cancer Research</h1>
</header>
<div class="nav_container">
<ul>
<li class="active"><a href="#" class="current">Home</a></li>
<li><a href="about.html">Mission</a></li>
<li><a href="contact.html">Ongoing<br>Research</a></li>
<li><a href="contact.html">Board of<br>Directors</a></li>
<li><a href="contact.html">Events</a></li>
<li><a href="contact.html">News</a></li>
<li><a href="contact.html">Patient/Caregiver<br>Comments</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="content_container">
<h2>Welcome</h2>
<section class="row">
<div><p><em>WINGS OF HOPE for PANCREATIC CANCER RESEARCH </em> was formed in February 2012 by Maureen A. Shul after losing her mother and brother within months of one another to pancreatic cancer. The non-profit foundation is dedicated to raising awareness and funding for the ongoing research, clinical trials and treatment of pancreatic cancer patients at the Pancreatic Cancer Research Program at the University of Colorado Cancer Center (UCCC).</p></div>
<div><p><img src="images/home_content_1.png" alt="doctors"></p></div>
</section>
<div class="hline"></div>
<section class="row">
<div>
<p class="sec_two">Pancreatic cancer is currently the fourth leading cause of cancer death in the United States. Of the most commonly diagnosed cancers, pancreatic cancer is the only one with a five-year relative survival rate in the single digits, at just 6 percent. This survival rate has not changed in the last 40 years.</p>
<p class="sec_two">By 2020 it is anticipated pancreatic cancer will rise from the fourth to the second leading cause of cancer death in the U.S. (based on projected changes in U.S. population demographics and incidence and death rates).</p>
<p class="sec_two">With no early detection tools, effective treatments or adequate funding for research, the rapidly rising threat of pancreatic cancer urgently demands an increase in awareness and research funding.</p>
</div>
<div><p><img src="images/home_content_2.png" alt="walkway"></p></div>
</section>
<div class="hline"></div>
<section class="row">
<div>
<p class="sec_three">Founded out of grief, driven by purpose and in pursuit of making a difference, WINGS OF HOPE for PANCREATIC CANCER RESEARCH is dedicated to<br>
- Accelerating the research<br>
- Providing the most advanced treatments<br>
- Finding the cure
</p>
</div>
<div><p><img src="images/home_content_3.png" alt="Shul Family"></p></div>
</section>
<p class="behope"><strong>JOIN THE EFFORT…BE A PART OF THE POSSIBLE, BE THE HOPE.</strong></p>
<div class="donate_link">Donate image goes here</div>
</div> <!-- content_container -->
<div class="footer_container">
<div class="row">
<ul class="left">
<li><a href="index.html">Home</a></li>
<li><a href="#">Mission</a></li>
<li><a href="#">Ongoing Research</a></li>
</ul>
<ul class="middle">
<li><a href="#">Board of Directors</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Patient/Caregiver Comments</a></li>
</ul>
<ul class="right">
<li><a href="#">Sponsers</a></li>
<li><a href="#">Donate/Volunteer</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="row">
<div class="fb_link"><img src="images/facebook_link.jpg"></div>
<div class="twitter_link"><img src="images/twitter_link.jpg"></div>
</div>
<div class="copyright">Copyright © 2012 Wings of Hope for Pancreatic Cancer Research</div>
<div class="designBy"> Website Design By <a href="http://foxdenwebsolutions.com" target="_blank">Foxden Web Solutions</a> </div>
</div> <!-- .footer_container -->
</div> <!-- .outer -->
</body>
</html>
Thanks ronpat. I am checking your code against mine to see where I failed. I find it interesting that you used table elements in order to work the footer content. I will see if I can successfully integrate some of your code into mine. I do appreciate the help.
Never say “failed”. My suggestion is “different”. Layout-wise, use the techniques that work best for you. There are a few “improvements” in this demo such as the assignment of the page background-images and the code in the lists; plus, the common features of the “rows” resulted in a single classname instead of three different classes in several places. A good bit of simplification. More was possible. Things to consider when writing a page.
Yes I was wondering if I had way too many classes going. That was what was confusing me. You simplified it.
FYI: if you want to add space above the top row, you can add a little padding to the top of the content_container:
.content_container {
padding-top:12px; /* some value */
}