Buggy Layout

Get Started
1

http://earajinam.com/dev/index.html

Hello All,

I have attached a link to my website, which I am trying to fix. One thing I can’t seem to fix the work section, b/c if the description about the project stays at a set character limit then the whole layout looks fine (i.e project 2 or image 2 – area ). Now if the description goes beyond a certain chracter count, then everything goes wonk (ie. project1 / image 1 ).

Ignore the colors in the work section, as they are only their for visual purpose. Any help would be appreciated.

HTML

<div class=“wrapper clearfix”>

	&lt;h2&gt;Work&lt;/h2&gt;
	
		&lt;article class="artwork"&gt;
		
			&lt;h3&gt;Campaign Ad&lt;/h3&gt;
			&lt;h4&gt;Tiffany & Co.&lt;/h4&gt;
			&lt;p&gt;This was a challenging class project, where we had to create a web banner ad that would reflect a unique company like Tiffany & Co. My inspiration was derived from Tiffany's 				popular display windows, where they would display their jewelery in a creative setup. Hence I used the Japanese cranes as symbolic animal for peace, the elegance, and the love 	
			that transpires from this beautiful bird.This was a challenging class project, where we had to create a web banner ad that would reflect a unique company like Tiffany & Co. My inspiration was derived from Tiffany's 				popular display windows, where they would display their jewelery in a creative setup. Hence I used the Japanese cranes as symbolic animal for peace, the elegance, and the love 	
			that transpires from this beautiful bird.&lt;/p&gt;
	
			&lt;figure&gt;&lt;img src="images/proj1.jpg" alt="Tiffany&Co."&gt;&lt;/figure&gt;
		
		&lt;/article&gt;
	
		&lt;article class="artwork"&gt;
			
			&lt;h3&gt;Dvd Jewel Cover&lt;/h3&gt;
			&lt;h4&gt;Inception&lt;/h4&gt;
			&lt;p&gt;This was a challenging class project, where we had to create a web banner ad that would reflect a unique company like Tiffany & Co. My inspiration was derived from Tiffany's 				popular display windows, where they would display their jewelery in a creative setup. Hence I used the Japanese cranes as symbolic animal for peace, the elegance, and the love 	
			that transpires from this beautiful bird.&lt;/p&gt;
	
			&lt;figure&gt;&lt;img src="images/proj1.jpg" alt="Inceotion Dvd Jewel Cover"&gt;&lt;/figure&gt;
			
		&lt;/article&gt;

CSS

.wrapper {
padding: 18% 2% 7%;
background-color: #FFF;
}

.wrapper h2{
border-bottom: 1px solid #000;
}

.artwork {
/* clear: both;
*/ background-color:#0C0;
margin-top: 5%;
margin-bottom: 5%;
overflow: hidden;
}

.artwork h3 {
/* margin-top: 5%;
*/ padding: .2% 0;
width: 15%;
font-family:Georgia, “Times New Roman”, Times, serif;
font-size: 1em;
background-color: #CB285D;
color: #fff;
}

.artwork h4 {
font-family:Georgia, “Times New Roman”, Times, serif;
font-size: 1.25em;
}

.artwork p {
font-family:Georgia, “Times New Roman”, Times, serif;
font-size: 1em;
background-color: #F90;
color: #707070;
padding-right: 70%;
text-align:justify;
}

.artwork figure {
float: right;
margin-top: -26%;
width: 65%;
}

2

You could try:

  • Making the project image or its container float: right (put this before the description text)
  • Making the project image or its container position: absolute and use top:0, right:0 or as appropriate