How to arrange a image on the left, a heading , a description and a link on the right within a single div

Question

This is the HTML i have for a piece of section in a webpage. I am making some mistake in CSS, but I am unable to figure out what exactly is that...

<div id="publications">
    <div id="singlepublication">
        <div id="pubthumb"><a href="#"><img src="siteimages/imagetest.jpg" height="140px" width="100px"></a></div>
        <div id="pubheading">Photography by Waruna Gomis</div>
        <div id="pubdesc"> <p>This is a book about the architectural photography done by Architect Waruna Gomis <p></div> 
        <div id="publink"> Link or Buy the Publication </div>
    </div>
    <div id="singlepublication">
        <div id="pubthumb"><a href="#"><img src="siteimages/imagetest.jpg" height="140px" width="100px"></a></div>
        <div id="pubheading">Photography by Waruna Gomis</div>
        <div id="pubdesc"><p>This is a book about the architectural photography done by Architect Waruna Gomis </p></div>
        <div id="publink"> Link or Buy the Publication </div>
    </div>
    <div id="singlepublication">
        <div id="pubthumb"><a href="#"><img src="siteimages/imagetest.jpg" height="140px" width="100px"></a></div>
        <div id="pubheading">Photography by Waruna Gomis</div>
        <div id="pubdesc"><p>This is a book about the architectural photography done by Architect Waruna Gomis </p></div>
        <div id="publink"> Link or Buy the Publication </div>
    </div>
</div>

and I have been unable to put some proper CSS to it :

#publications {
width: 798px;
height: 720px;
}

#singlepublication {
float: left;
height: 150px;
width: 789px;
border: #FFF thin solid;
padding: 2px;
margin-left :3px;
margin-top: 2px;
}

#pubthumb {
position: absolute;
float: left;
width: 100px;
height: 140px;
padding: 5px 10px 5px 10px;
border-right:#CCC thin solid;
}

#pubheading {
position: absolute;
float: left;
color: #FFF;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size:16px;
padding: 15px 10px 10px 10px;
margin-left: 5px;
border-bottom: #999 thin solid;
width: 650px;
}

#pubdesc {
float: left;
position: absolute;
padding: 5px;
margin-left: 5px;
width: 789px;
}

#pubdesc p {
color: #FFF;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size: 10px;
}

#publink {
float: left;
}

I really dont understand what is going wrong here....any help would be appreciated.

Can't you add a second DIV to make another column? 1 for the picture and 1 for the content? — maqjav, Jul 01 '13 at 11:41

score 2 · Answer 1 · answered Jul 01 '13 at 11:42

Remove position:absolute and float :left from all divs. Give float:left only for pubthumb div and parent div

#publications {
width: 798px;
height: 720px;
}

#singlepublication {
float: left;
height: 150px;
width: 789px;
border: #FFF thin solid;
padding: 2px;
margin-left :3px;
margin-top: 2px;
}

#pubthumb {
float: left;
width: 100px;
height: 140px;
padding: 5px 10px 5px 10px;
border-right:#CCC thin solid;
}

#pubheading {
color: red;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size:16px;
padding: 15px 10px 10px 10px;
margin-left: 15px;
border-bottom: #999 thin solid;
width: 650px;
}

#pubdesc {
padding: 5px;
margin-left: 5px;
width: 789px;
}

#pubdesc p {
color: #000;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size: 10px;
}

#publink {
}

DEMO

score 0 · Answer 2 · answered Jul 01 '13 at 11:36

0

you must use different id for #singlepublication. Replace #singlepublication to .singlepublication.

answered Jul 01 '13 at 11:36

maverabil

188
3
16

score 0 · Answer 3 · edited May 23 '17 at 12:28

I would narrow down your code a little. I will try to explain in a few steps:

Step 1. - Make ID's classes (ID's should only be used if they are unique within the html-document)

<div id="singlepublication">
    <div class="pubthumb"><a href="#"><img src="siteimages/imagetest.jpg" height="140px" width="100px"></a></div>
    <div class="pubheading">Photography by Waruna Gomis</div>
    <div class="pubdesc"> <p>This is a book about the architectural photography done by Architect Waruna Gomis <p></div> 
    <div class="publink"> Link or Buy the Publication </div>
</div>

Instead of #pubthumb, #pubheading, #pubdesc, #publink you refer to them as .pubthumb, .pubheading, .pubdesc and .publink in your css.

Step 2. - Only use elements where you have to.

<div class="singlepublication">
    <a class="pubthumb" href="#"><img src="siteimages/imagetest.jpg" height="140px" width="100px"></a>
    <div class="description">
        <h2>Photography by Waruna Gomis</h2>
        <span class="pubdesc"><p>This is a book about the architectural photography done by Architect Waruna Gomis </p></span>
        <a href="#">Link or Buy the Publication</a>
    </div>  
</div>

Instead of using a div for the image, set a class on the image-tag and apply the css directly to the image.Don't create a div for every different content. Use header-tags where there are headers (h2). Use <span> if viable. Style the link instead of wrapping the link inside a div and style the wrapper.

Step 3 - Don't use old width/height (for images). Width and height should be expressed within the css as well.

Step 4 - Use clearfix - here's a good link telling what clearfix actually is: What is a clearfix?

Based on above your code should look like:

css

#publications {
width: 798px;
height: 720px;
}

.singlepublication {
position:relative;
width: 789px;
border: #FFF thin solid;
padding: 2px;
margin-left :3px;
margin-top: 2px;
}

.pubthumb {
position:relative;
float:left;
width: 100px;
height: 140px;
padding: 5px 10px 5px 10px;
border-right:#CCC thin solid;
}

.description {
position:relative;
float:left;
background:blue;
width:500px;
}

.description h2 {
color: #FFF;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size:16px;
padding: 15px 10px 10px 10px;
margin-left: 5px;
border-bottom: #999 thin solid;
}

.pubdesc {
padding: 5px;
margin-left: 5px;
width: 789px;
}

.pubdesc p {
color: #FFF;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size: 10px;
}

.description a {
/* style the link as you wish */
}

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}

html

<div id="publications">
    <div class="singlepublication clearfix">
        <a class="pubthumb" href="#"><img src="siteimages/imagetest.jpg" alt="" /></a>
        <div class="description">
            <h2>Photography by Waruna Gomis</h2>
            <span class="pubdesc"><p>This is a book about the architectural photography done by Architect Waruna Gomis </p></span>
            <a href="#">Link or Buy the Publication</a>
        </div>  
    </div>
    <div class="singlepublication clearfix">
        <a class="pubthumb" href="#"><img src="siteimages/imagetest.jpg" alt="" /></a>
        <div class="description">
            <h2>Photography by Waruna Gomis</h2>
            <span class="pubdesc"><p>This is a book about the architectural photography done by Architect Waruna Gomis </p></span>
            <a href="#">Link or Buy the Publication</a>
        </div>  
    </div>
    <div class="singlepublication clearfix">
        <a class="pubthumb" href="#"><img src="siteimages/imagetest.jpg" alt="" /></a>
        <div class="description">
            <h2>Photography by Waruna Gomis</h2>
            <span class="pubdesc"><p>This is a book about the architectural photography done by Architect Waruna Gomis </p></span>
            <a href="#">Link or Buy the Publication</a>
        </div>  
    </div>
</div>

Note that float:left is applied only on pubthumb (which is now the image to the left) and description-div (which is now everything on the right side of the image).

Some tips when beginning designing something (or beginning learning):

Add TEMPORARILY different background-colors to divs or content-areas you're designing. This makes it easiser to see where the divs are located.
Use FireBug or Chromebug (It gets so much easier) (http://getfirebug.com/), (https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench)
If designing for IE, don't try to get logic of some things. Just google it and try to fix it so your design works for IE as well.

How to arrange a image on the left, a heading , a description and a link on the right within a single div

3 Answers3