Tips for positioning content within a div: Organize an image to the left, a header in the center, a description, and a link on the right

Can someone please help me with this HTML section on my webpage? I'm struggling to identify the CSS errors...

<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>

I've been struggling to apply proper CSS to this section:

#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 can't seem to figure out what's causing the issue here. Any assistance would be greatly appreciated.

htmlcss

Answer №1

Make the following changes to the CSS:

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

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

#pubthumb, #singlepublication {
float: left;
}

#pubthumb {
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 {
}

See DEMO for reference

Answer №2

It is important to utilize a unique ID for #singlepublication. Switch from using #singlepublication to .singlepublication instead.

Answer №3

To streamline your code, follow these steps:

Step 1. - Use classes instead of IDs

<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 architectural photography by Architect Waruna Gomis <p></div> 
    <div class="publink"> Link or Buy the Publication </div>
</div>

In your CSS, refer to them as .pubthumb, .pubheading, .pubdesc, and .publink instead of using # for IDs.

Step 2. - Minimize unnecessary elements

<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 architectural photography by Architect Waruna Gomis </p></span>
        <a href="#">Link or Buy the Publication</a>
    </div>  
</div>

Avoid creating divs for every piece of content. Use header tags (h2) where needed. Style links directly instead of wrapping them in divs.

Step 3 - Avoid specifying old width/height values in HTML

Step 4 - Implement clearfix for layout consistency

Revise your code based on the provided recommendations.

Additional tips for beginners:

  1. Add temporary background colors to aid in visualizing design elements.
  2. Utilize browser developer tools like FireBug or Chromebug for easier troubleshooting.
  3. When designing for IE, research solutions online to ensure cross-browser compatibility.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure the placeholder remains front and center, growing in size as it moves vertically

.inpsearch{ border:2px solid #bbb; border-radius:14px; height:29px; padding:0 9px; } .inpsearch::-webkit-input-placeholder { color: #ccc; font-family:arial; font-size:20px; } <input type='search' class='inpsea ...

htmlcssplaceholder

The background image is cropped at both the top and bottom edges

Check out this JSFiddle link: http://jsfiddle.net/SoSoDef/uhx3o62f/1/. The code seems to be running fine, but I'm facing an issue where the image is being slightly cut off at the top and bottom for some reason. -webkit-background-size: cover; Can an ...

htmlcssimage

CSS animations can manipulate the rate at which frames are displayed

Exploring the use of CSS animation instead of animated GIFs for loading wheels. Check out a simple example here. #me { -webkit-animation: rotation 2s infinite linear; } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to ...

csscss-animationsframe-rate

Unique background image that perfectly aligns with the dimensions of a single full screen

Does anyone know how this webpage achieves the effect of having a full-screen background that ends when scrolling down? I have noticed that the picture of the desert always covers my entire browser screen but is not a typical full-screen background as it ...

htmlcssbackgroundbackground-image

Preserve selected option in select box after page refresh in JSP

I'm working on a jsp page that contains a simple select html element. Right now, when I select an option and click the Wyswietl button, the page refreshes, the table data is refreshed, but the selected option resets to default... How can I make it sta ...

javascriptjqueryhtmljsp

Tips for converting JSON information on a website and inserting it into a designated division?

I've recently delved into front-end development, searching for solutions and hints without much success. I'm currently in the process of building my first website, specifically a "find recipes" website. Lacking knowledge of API calls, I created a ...

javascriptjqueryhtmljsonajax

Screen size is incompatible with flash player

I've been using this code to try and make a swf file fit my screen or any screen it's on, but I've run into an issue. When using this code, the player in both Chrome and IE stretches to fit the screen width, but the height remains the same, ...

cssswfobject

When working with JavaScript, the `textarea` value property will not recognize line breaks or white spaces when being read

Recently, I've been developing a browser-based notebook app. However, I encountered an issue where if I type a note like this: *hello this is my first note The app displays it as: hello this is my first note Additionally, I want elements with the ...

javascripthtmlcssbootstrap-4

Locating Elements with Python 3 and Selenium: Unraveling the xpath Mystery

https://www.facebook.com/friends/requests/?fcref=jwl&outgoing=1 I am looking to click on the "See more request" option within the "friend request sent" section. <div id="outgoing_reqs_pager_57b87e5793eb04682598549" class="clearfix mtm uiMorePager ...

pythonhtmlseleniumxpath

The true meaning of CSS3 transition is often misconstr

I'm trying to create a simple linear transition effect, but for some reason it's not working. Any suggestions on what might be causing the issue? HTML <div class="button-modern" style="background-color:#e73032"> <span style="color: ...

jquerycsscss-transitions

Reorganizing DIV elements on-the-fly

I've recently delved into the world of html, css, and javascript with the hopes of creating my very own news website. However, I've come across a puzzling problem: My vision is to have 10 div blocks on the homepage, each containing a headline wi ...

javascriptphphtmlcss

Creating a dynamic Bootstrap 4 hover effect for collapsible elements with numerous items

I have come across a few techniques for implementing the collapsible accordion feature in bootstrap. However, I am facing a challenge when it comes to customizing it so that only one panel-collapse is activated upon hovering over the div.panel-heading > ...

htmlbootstrap-4

The application experiences crashes when the tablet is rotated, happening while in the development stage

For my web-based Android application project, I am utilizing PhoneGap and Eclipse IDE on a Windows platform. My focus is specifically on Tablet development, more precisely on the Samsung Galaxy Tab 10.1. To develop, I use Eclipse and test the app on the ...

javascriptandroidhtmlcsscordova

Using SQL to Insert Values into Select/Option

I am attempting to create a select form element with predetermined options. <select name="select1"> <option value="value1">Value 1</option> <option value="value2">Value 2</option> <option value="value3">Value 3 ...

phphtmlmysqlsqlforms

Click event triggers nested bootstrap collapse

As a beginner in bootstraps and coding, I am currently experimenting with opening the main bootstrap panel using an onclick event that includes nested sub panels. Here is my index.html file containing the panels and the button; <link href="https://m ...

javascriptjqueryhtmlcsstwitter-bootstrap

iOS now supports hardware-accelerated CSS3 transitions for seamless and

I can't seem to get hardware acceleration working with my translate3d for top/bottom positioning. What could be causing the issue? .image { background:yellow; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; ...

javascriptioshtmlcsshardware-acceleration

Optimal selection of selectors for every type of button in an HTML document

In my current setup, I am utilizing the following selectors: input[type="button"], input[type="submit"], input[type="reset"], button Do you think this is a comprehensive selection of selectors to cover all potential buttons on a website? ...

cssselector

What steps can I take to ensure that the HTML code is visible on top of the animation, rather than being hidden behind

I attempted to apply the CSS rule p{ z-index: 99 !important; } but it did not have the desired effect. My goal is to have all HTML elements appear on top of the animation. Here is the code snippet: <!DOCTYPE html> <html> <head> < ...

javascripthtmljquerycssthree.js

How can I make the navbar in Angular stay fixed in place?

After using the ng generate @angular/material:material-nav --name=home command to create a navbar, I am trying to make it fixed at the top while scrolling. I attempted using position: fixed; on my mat-sidenav-content but it didn't work. Does anyone ha ...

cssangularnavbar

Is it possible to convert an NPM project into a JavaScript file that is compatible with

Can a modestly sized NPM package be transformed into a JavaScript file for direct reference in HTML using a <script> tag? The NPM package in question is straightforward and serves as an API wrapper that I wish to implement without depending on Node. ...

javascripthtmlnode.jsnpmnode-modules