I am having a bit of a problem with one of my containers. It is not expanding with my content. Here is the code:
<!--center section start-->
<div id="centerContent">
<!--center left begin-->
<div id="centerLeft">
<h2>
Special Disney Ticket Offer!
</h2>
<p class="specCont">
<img class="specImg" src="images/universal-main-offer.jpg" alt="Special Universal Studios Ticket Offer!" />
Super Value Disney 3 Day Touch of Magic Ticket! Just $219 for each ticket! Get 3 Days to visit the Disney Theme Parks (Magic Kingdom, Epcot, Hollywood Studios, Animal Kingdom) PLUS a 4th day at Disney Quest, Blizzard Beach or Typhoon Lagoon! For an unbelievable value! Call & ask for the Resort offer<br />(restrictions apply).<br /> <strong>Call us: 1-800-544-7646</strong>
</p>
</div>
<!--center left end-->
<!--center right begin-->
<div id="centerRight">
<a href="http://tix.greatorlandodiscounts.com/index.php?catid=106">
<img class="rightFrontImg" src="images/legoland-fl-front-ad.jpg" alt="Legoland Florida Discount Tickets" />
</a>
</div>
<div class="clear"></div>
<!--center right end-->
</div>
<!--center section end-->
CSS:
#centerContent {
width: 980px;
height: 100%;
background-image:url(../images/main-special-bg-strip.png);
background-repeat:repeat-y;
}
#centerLeft {
width: 572px;
height: 100%;
float:left;
}
#centerRight {
width: 408px;
height: 100%;
float:right;
}
What I am looking to do is have the centerContent div stretch with the two divs inside. I have a background strip on the centerContent that will allow the white background to expand 100%.
I hope that made some sort of sense and thank you in advance for any and all help.
Add overflow:auto; to #centerContent.
Since the child divs are floated, the parent collapses and acts like it has no content. Adding overflow:auto; restores the expected behavior.
Related
I am trying to get the div with div class bioDiv to line up under the image but have tried so many things that I am just getting more and more confused can anyone look at the code for me and give me a clue? Looking to keep the same look just move the div to a more central location.
here is the code:
body {
width: 100%;
height: auto;
background-image: url("../img/marble-background.gif");
background-size: 100% 100vh;
}
img {
border: 10px solid #E3C640;
}
.menuDiv {
background-color: white;
height: 850px;
width: 300px;
margin-top: 70px;
border: 15px solid #E3C640;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
}
.bioDiv {
background-color: white;
height: 850px;
width: 1200px;
border: 15px solid #E3C640;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cary McClures' Portfolio</title>
<style type="text/css">
#import url("bootstrap-5.1.3-dist/css/bootstrap.css");
</style>
</head>
<head>
<body>
<img style="position: absolute; right: 600px; top: 68px
" src="../img/images/me.jpg" width="400" height="600" alt="picture of cary" />
<div class="menuDiv">
<h2 style="color: goldenrod">Home</h2>
<br>
<h2 style="color: goldenrod">Biography</h2>
<br>
<h2 style="color: goldenrod">Education</h2>
<br>
<h2 style="color: goldenrod">Graphic Design</h2>
<br>
<h2 style="color: goldenrod">Freelance</h2>
<br>
<h2 style="color: goldenrod">Baking</h2>
<br>
<h2 style="color: goldenrod">Photo Gallery</h2>
<br>
<h2 style="color: goldenrod">Resume</h2>
<br>
<h2 style="color: goldenrod">Contacts</h2>
<br>
<h2 style="color: goldenrod">Sitemap</h2>
</div>
<div class="bioDiv">
<br>
<h2 style="color: goldenrod">Biography</h2>
<p>Cary L. McClure is an enthusiastic Geneva-based Educator, Culinary Artist, Graphic Designer, and Overachiever with a decade-long background in leadership and customer service.
</p>
<br>
<p>Hailing from Indianapolis originally, Cary’s avid interest in the graphic arts started while he was in high school back in 1983. Unable to attend college, he wound up in the food industry.
</p>
<br>
<p>After working as a Pastry Chef for several years, Cary ultimately has had to alter his career path, due a disability he endured during his time in the military.
</p>
<br>
<p>Currently Cary has been working as a Substitute teacher (K-12) for Adams Central and South Adams Schools.
</p>
<br>
<p>Cary served as an Adjunct Instructor at Ivy Tech Community College, where he taught students about Cakes, Filling and Icings, Wedding Cake Production, and Classical Pastries.
</p>
<br>
<p>In 2019 Cary obtained his bachelor’s degree in Visual Communication (Graphic Design) from Indiana University. Furthermore, he holds an Associates of Applied Science degree (with honors) in Hospitality & Culinary Pastry Arts from Ivy Tech.
</p>
<br>
<p>Outside of his career, Cary L. McClure enjoys reading fantastical books, PS4 and Xbox One gaming, and crafting gum-paste flowers. An avid traveler, he also loves exploring new places and is seeking a position that will allow him to travel across
the country. Above all, he cherishes spending quality time with his family. He is the proud father of one married son.
</p>
<br>
</div>
</body>
</head>
</html>
I would suggest making two containers (an aside and a main) and put the navigation list in the aside and the image and bio in the main. Something like this:
.container {
display: flex;
}
<div class="container">
<aside>
<h1>Put your nav here</h1>
</aside>
<main>
<img src="" height="200" width="300" />
<div>
<h1>Put Bio here</h1>
</div>
</main>
</div>
PS: In case you didn't know, aside and main are semantic HTML5 tags used to markup a page. You can use divs instead of them, but it's not best practice
In Bootstrap you do not have to dictate the widths etc, it can all be done using standard Bootstrap CSS which you dictate as a class= in your HTML. So, for the image you could have that fluid inside a column.
<div class="col-sm-12 col-md-10 mx-auto">
<img src="../img/images/me.jpg" class="img-fluid" alt="picture of cary"/>
</div>
That's full width (12 wide) on small screens and not quite full width (10 wide) on anything larger but mx-auto should center the entire Div. Setting the image to class img-fluid makes it the full width of the Div no matter the screen.
Hopefully after that you can use exactly the same column set up for .bioDiv.
<div class="col-sm-12 col-md-10 mx-auto">
<h2 style="color: goldenrod">Biography</h2>
continued content here....
</div>
Ultimately you are just wrapping the image in a Div and setting both it and bioDiv to the same column parameters. It should not hurt in any way to set up menuDiv a similar way.
I'm brand new to web development and I have build a little website with 3 pages. My goal is to use #media tags to make it responsive for the following: max-widths: 980px, 768px and 640px. I did the first page and it's been acting weird. How can I make the entire website responsive? Please to assist. My code for all 3 pages and the media is attached. Thanks.
/*first page */
<head>
<title>AboutMe</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact">Contact</li>
<li class="portfolio">Portfolio</li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
To briefly introduce the... to you I would say it is a country located on the........>
shares the same borders with ....... It is the world largest<br>
producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br> real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br> "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*second page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About Me</li>
</ul>
</div>
</div>
<div class="middle">
<div class="center-portfolio">
<h3> Portfolio</h3>
<hr>
<div class="div1"><img src="assets/img/career1.jpg" height="120px" width="150px"></div>
<div class="div2"><img src="assets/img/chocolatour.jpg" height="120px" width="150px"></div>
<div class="div3"><img src="assets/img/guildhouse.jpg" height="120px" width="150px"></div>
<div class="div4"><img src="assets/img/career2.jpg" height="120px" width="150px"></div>
<div class="rotateIn div5"><img src="assets/img/Abidjan1.jpg" height="120px" width="150px"></div>
<div class="div6"><p><i>please to hover on the images</i></p></div>
<div class="banner1">career picture 1</div>
<div class="banner2">chocolate tour</div>
<div class="zoomIn banner5">Abidjan</div>
<div class="banner4">career picture 2</div>
<div class="banner3">Guild Brussels</div>
</div>
</div>
<div class="footer">
<p class="footer-copyright"> Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*third page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About Me</li>
</ul>
</div>
</div>
<div class="middle">
<div class="center">
<h3> Contact</h3>
<hr>
<form>
Name:<br>
<input id="namebox" type="text" name="name" required="" placeholder="your name">
<br><br>
Email:<br>
<input id="emailbox" type="Email" name="email" required="" placeholder="example#yahoo.com">
<br><br>
Message:<br>
<textarea id="messagebox" style="height: 200px; " name="message" placeholder="Enter massage here" required="">
</textarea>
<br><br>
<input type="submit" value="submit" name="submit">
</form>
<br>
</div>
</div>
<div class="footer">
<p class="footer-copyright">
Copyrigtht © 2019 Portfolio "name" All rights reserved.
</p>
</div>
</div>
</body>
/* Width at 768px and below */
#media screen and (max-width: 768px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
/*Width at 640px and below */
#media screen and (max-width: 640px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
Start out by removing fixed width properties. I am having a hard time seeing how you need width: 50% on everything. Then start by just addressing the styles of your .container element.
A good techniques is setting the max-width to the width you have in mind for the site to be viewed on a normal desktop screen, in the demo I used 600px but you can use any value that feels right.
Then in you media query assign a new max-width value that is appropriate for the screen size in the query, here i used 80% becuase typically on small screens you want the content to mostly fill the width of the screen with a little space on the sides, but again you can configure this to your needs in a variety of ways.
The main thing here is that your container element is now responsive and the content inside can fill up the space however you like from there. Run the snippet and click the Full page link to play around with the screen width and see the behavior working.
.container {
max-width: 600px;
margin: 0 auto;
}
#media screen and (max-width: 640px;) {
.container {
max-width: 80%;
}
}
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact">Contact</li>
<li class="portfolio">Portfolio</li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
To briefly introduce the... to you I would say it is a country located on the........>
shares the same borders with ....... It is the world largest<br>
producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br> real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br> "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
I wish you had a sketch of what the final product will look like it would have been very helpful. There is more to making a page responsive than writing just valid HTML tag and corresponding styles and mind typos because from your code the extra % sign will make
.middle-about-me{
width: 50%%;
}
misbehave.
There a couple of things you need to know to be able to make a page responsiveness effective and very close to what you want.
Firstly you should consider resetting the default styles that the browser naturally applies to valid HTML tags by using normalize.css or utilize the power of universal selector which is almost as good in modern browsers, something like:
*,
*::before,
*::after{
padding: 0;
margin: 0;
box-sizing: inherit; /* to inherit the value declared in the body selector */
}
html{
font-size: 62.5% /* (10/16) * 100% and this is possible because by default the value of 100% will be computed to 16px by the browser and equal to 1(r)em, with this conversion we can reduce the calculations whenever you want to convert a value from px to (r)em since the are in multiples of 10 eg 1(r)em == 10px and 10(r)em == 100px*/
}
body{
box-sizing: border-box;
}
img{
width: 100%;
min-width: 27rem; /* to make the images responsive and look good on smaller screens */
}
so with the that basic reset you can always rely on using ems or rems for fonts an percentages for images and other block element when it feels appropriate.
This little write up is not enough to teach you all you need to know about responsiveness in the web but I hope it shed light on your path. Meanwhile those were not my original ideas i took a course by 'Jonas Schmedtman', He actually thought me those.
If you have a sketch of what the final pages should look like or you are still not very clear with what i have tried to explain so far please don't hesitate to add a comment so that we tidy it up together.
I'm new here and also somewhat of a beginner in Html and CSS. I'm currently working on a project using both CouchCMS for content management and then Bootstrap for the responsive framework. To give a short background, I've set up a custom.css file and have linked it accordingly to the website as well as the bootstrap css. I'm currently going through the steps to create a "Blog List" page to list all my blog snippets on one page, and basically what's happening is the sidebar is appearing on the right, but below the first element instead of side by side.
What I've noticed is that with just 1 post on the page it shows the way it's supposed to, however as soon as a 2nd is added it moves to the bottom half of the page on the right.
Here is my Code:
#main {
width: 90%;
margin: 40px auto;
}
#news-content {
float: left;
width: 60%;
margin: 0 3% 0 5.5%;
border-radius: 10px;
background-color: white;
}
#my-sidebar {
float: right;
width: 26%;
height: 100%;
margin: 0 5.5% 0 0;
border-radius: 10px;
background-color: white;
}
#cms-blog {
width: 90%;
height: inherit;
margin: 25px 0 0 5%;
}
<div id="main">
<cms:pages masterpage='news_entry.php' orderby='publish_date' order='asc'>
<!--Begin of CouchCMS Blog List-->
<div id="news-content">
<!--Wrapper for Left Side Blog Content-->
<div id="cms-blog">
<h1><cms:show k_page_title /></h1>
<cms:if k_page_foldertitle>
<cms:set my_category=k_page_foldertitle />
<cms:else />
<cms:set my_category='Uncategorized' />
</cms:if>
<h6><cms:show my_category /> • <cms:date k_page_date format='M jS, y' /> • <cms:show k_comments_count /> Comments</h6>
<hr />
<img src="<cms:show blog_image />" alt="" width="100%" />
<cms:show blog_content />
<p class="clearfix">Read More...
</p>
</div>
</div>
</cms:pages>
<!--End of CouchCMS Blog List-->
<div id="my-sidebar"></div>
<!--Wrapper for Sidebar-->
<div style="clear: both;"></div>
</div>
Another thing I've noticed is that when I go to the page which shows multiple blogs, CouchCMS automatically creates another news-content DIV. I'm thinking this may be the problem and the float:right is making the sidebar appear on the bottom right half of the page because it comes after the 2nd news-content, however if this is the issue, I have no idea how to fix it. I've been rearranging my code in different ways to try and see if I can fix it and have been searching the web for a few hours now and have come up with no solution.
Well now I feel like an idiot. I figured it out while rearranging the code. All that I had to do was change my cms:pages beginning and ending tags to only include the content of the post and not the div tags. Once I made the change, it immediately showed as I wanted it to.
My new code looks like this:
<div id="main">
<div id="news-content">
<div id="cms-blog">
<cms:pages masterpage='news_entry.php' orderby='publish_date' order='asc'>
<!-- I changed this to go after the beginning div tags instead of before-->
<h1><cms:show k_page_title /></h1>
<cms:if k_page_foldertitle>
<cms:set my_category=k_page_foldertitle />
<cms:else />
<cms:set my_category='Uncategorized' />
</cms:if>
<h6><cms:show my_category /> • <cms:date k_page_date format='M jS, y' /> • <cms:show k_comments_count /> Comments</h6>
<hr />
<img src="<cms:show blog_image />" alt="" width="100%" />
<cms:show blog_content />
<p class="clearfix">Read More...
</p>
</cms:pages>
<!--I changed this to come before the closing div tags instead of after-->
</div>
</div>
<div id="my-sidebar"></div>
<div style="clear: both;"></div>
</div>
I am having issues with the document flow when floating a div to the left and another div to the right.
Both divs left and right are aligned perfectly horizontally with one another. (Menu Item name and menu item price)
However the following Menu Category Name (Burgers) and Menu Category description is starts all the way on the top. Right below the first Menu Category (Breakfast)
I have set Menu Item Name Div to float left and clear left. I did the same with menu item price, but instead I floated right and clear right.
The "Burgers" category and its description needs to show below the last menu item name and price which is. "Oatmeal 3.50"
Doesn't the burgers category needs to follow normal document flow when clearing broth divs?
I have tried changing the .menu_item_name css to display as inline_block , that solved the issue but the menu prices wouldn't line up with the menu items.
Can you guys please help me resolve this issue? I would much appreciate it.
Below is a link to a js fiddle example.
http://jsfiddle.net/eldan88/NkH74/
<style>
#menu_container {
width: 750px;
margin-left: auto;
margin-right: auto;
}
#menu_left_wrapper {
width: 350px;
float: left;
clear: left;
padding-right: 25px;
border-right:thick solid #ff0000;
}
#menu_right_wrapper {
width: 350px;
float: right;
clear: right;
}
.menu_item_name a {
float: left;
clear: left;
}
.menu_item_price {
float: right;
clear: right;
}
</style>
HTML:
<div id='menu_left_wrapper'>
<div class='menu_category'>Breakfast</div>
<div class='menu_item_name'>
<a href='/menus/item-detail.php' > H&H Bagel </a>
</div>
<div class='menu_item_price'>
1.00<img class='item_image' src='21404.jpg' width='15px' height='15' />
</div>
<div class='menu_item_name'>
<a href='/menus/item-detail.php' > One Egg Sandwich </a>
</div>
<div class='menu_item_price'>1.75</div>
<div class='menu_item_name'>
<a href='/menus/item-detail.php' > Breakfast Platter </a>
</div>
<div class='menu_item_price'>4.25</div>
<div class='menu_item_name'>
<a href='/menus/item-detail.php' > Create your own egg sandwich </a>
</div>
<div class='menu_item_price'>3.25</div>
<div class='menu_item_name'>
<a href='/menus/item-detail.php' > Two Pancakes and Two Eggs </a>
</div>
<div class='menu_item_price'>4.75</div>
<div class='menu_item_name'>
<a href='/menus/item-detail.php' > Oatmeal </a>
</div>
<div class='menu_item_price'>3.50</div>
<div class='menu_category'>Burgers</div>
Our certified Angus beef burgers are grilled to order and served on a toasted brioche bun with lettuce and tomato, pickles and red onion upon request
<div class='menu_category'>Mexican Quesadillas</div>
<div class='menu_category'>Salad </div>
<div class='menu_category'>Cold Beverages</div>
</div>
This is all you need: http://jsfiddle.net/NkH74/2/
<div class='menu_item_name'>
<a href='/menus/item-detail.php'> H&H Bagel </a>
<span class="menu_item_price">1.00</span>
</div>
#menu_left_wrapper {
width: 350px;
padding-right: 25px;
border-right:thick solid #ff0000;
}
.menu_item_name span{
float:right;
}
really.
What I did is I used a common parent for both the link and price.
Try inserting a clearing div above Menu Category Name:
<div class="clr"></div>
.clr { width: 100%; height: 0; clear: both; }
simply you can insert a new div with clear before the Burgers Category
<div id='menu_left_wrapper'><div class='menu_category'>Breakfast</div>
<div class='menu_item_name'><a href='/menus/item-detail.php' > H&H Bagel </a></div><div class='menu_item_price'>1.00<img class='item_image' src='21404.jpg' width='15px' height='15' /></div>
<div class='menu_item_name'><a href='/menus/item-detail.php' > One Egg Sandwich </a></div><div class='menu_item_price'>1.75</div>
<div class='menu_item_name'><a href='/menus/item-detail.php' > Breakfast Platter </a></div><div class='menu_item_price'>4.25</div>
<div class='menu_item_name'><a href='/menus/item-detail.php' > Create your own egg sandwich </a></div><div class='menu_item_price'>3.25</div>
<div class='menu_item_name'><a href='/menus/item-detail.php' > Two Pancakes and Two Eggs </a></div><div class='menu_item_price'>4.75</div>
<div class='menu_item_name'><a href='/menus/item-detail.php' > Oatmeal </a></div><div class='menu_item_price'>3.50</div>
<div style="clear: both;"></div>
<div class='menu_category'>Burgers</div>
Our certified Angus beef burgers are grilled to order and served on a toasted brioche bun with lettuce and tomato, pickles and red onion upon request
<div class='menu_category'>Mexican Quesadillas</div>
<div class='menu_category'>Salad </div>
<div class='menu_category'>Cold Beverages</div>
</div>
I updated your fiddle and I think everything lines up as expected. It's not elegant but it works.
http://jsfiddle.net/mlnmln/WG5TK/2/
CSS:
.menu_item_name {
float: left;
clear: left;
}
.menu_item_price {
text-align: right;
}
Doesn't the burgers category needs to follow normal document flow when clearing broth divs?
The burger category itself doesn't follow normal document flow because you need to clear after an element, not within it to restore normal flow.
Bonus points: As others have stated it would probably be better to wrap .menu_item_name and .menu_item_price in a parent element and apply a clearfix.(What methods of ‘clearfix’ can I use?).
This problem references this page: 2-Column Team Page
NOTE: I had to remove some links because I am new to this site. Please look at the sample page.
I am using WordPress 3.5.1 and the Poloray theme.
I am creating a page of partners in my organization. The design calls for 2 columns: the left column has an image and the right column has an excerpt from the individual's bio page. Mousing over the image displays contact info (this works fine).
I have tried for several days to implement code that produced 2-columns within a theme . When I create one left/right column pair everything lines up. But once I replicate the code for the next person the second bio excerpt is pushed way down.
The code I found is:
<style><!--#columns { width: 600px; } #columns .column { position: relative; width: 46%; padding: 1%; } #columns .left { float: left; width: 30%; padding: 1%; } #columns .right
{ float: right; width: 65%; padding: 1%; }-->
<p style="text-align: left;"><strong>Leadership</strong></p>
<p>
<div id="columns">
<div class="left column"><figure><img class="alignnone" title="Vishal 415-894-5509 | vishal#anicon-group.com" alt="Vishal-Resume-Photo" src="**IMAGE LINK**" width="70" height="70" />
<figcaption>Vishal Parikh</figcaption></figure></div>
<div class="right column">Ex prompta apeirian nam, vix an rebum partem. Has pertinax gubergren necessitatibus eu, tamquam accommodare concludaturque eu eumsed cu...
Learn more about Vishal</div>
</p>
<p>
<div class="column"><figure><img class="alignnone" title="Richard 415-894-5255 | richard#anicon-group.com" alt="Richard Targett" src="**IMAGE LINK**" width="70" height="70" />
<figcaption>Richard Targett</figcaption></figure></div>
<div class="right column">Rick has more than 20 years of experience leading efforts in financial services and entrepreneurial ventures including 12 years in capital markets with a global Wall Street investment banking firm, 10 years in senior role for a big 4 firm...
Learn more about Rick</div>
</p>
The divs repeat for each person. I have played with the widths, position (relative vs. absolute), making the second div start with the ".column" class vs. "left-column". Nothing seems to work.
This solution is the closest to giving me the desired effect. I tried other approaches using the <li> tag but the results were worse.
Wrap every left and right content with an element with a class say column-wrap i.e .left and .right elements will be wrapped with column-wrap. Repeat the .column-wrap block. See fiddle.
HTML
<div id="columns">
<div class="column-wrap">
<div class="left column">
<!--left content-->
</div>
<div class="right column">
<!--right content-->
</div>
</div>
<div class="column-wrap">
<div class="left column">
<!--left content-->
</div>
<div class="right column">
<!--right content-->
</div>
</div>
</div>
CSS
#columns .column-wrap {
overflow:hidden;
}