Struggling with CSS to display images

Struggling to align my images within the designated red lines in the CSS sections I created. Can't seem to get it right.

Here's my HTML:

 <!-- Your code goes here --> 
<div class="container"> 

<section class="left">  
<h1>Photo Gallery</h1>
<article>
<h4>World Capitals</h4>
<p>A capital city is a city or town, specified by law or constitution, by the government of a country, or
part of a country, such as a state, province, or county. It generally serves as the location of the government's central meeting place and offices. Most of the country's leaders and officials work in the capital city</p>
</article>

<article class="divider">
<h4>Thailand</h4>
<figure>
<figcaption>
Bangkok
</figcaption>
<img src="Bangkok.jpg" alt="Capital of Thailand" title="Bangkok" />
</figure>   
<p>
Thailand is a country on Southeast Asia’s Indochina peninsula known for tropical beaches, opulent royal palaces, ancient ruins and ornate temples displaying figures of Buddha, a revered symbol. In Bangkok, the capital, an ultramodern cityscape rises next to quiet canal and riverside communities. 
Commercial hubs such as Chinatown consist of labyrinthine alleys crammed with shophouses, markets and diners.
</p>
</article>

<article class="divider">
<h4>Egypt</h4>
<figure>
<figcaption>
Cairo
</figcaption>
<img src="Cairo.jpg" alt="Capital of Egypt" title="Cairo" />
</figure>
<p>
Egypt, a country linking northeast Africa with the Middle East, dates to the time of the pharaohs. Millennia-old monuments still sit along the fertile Nile River Valley, including the colossal Pyramids and Sphinx at Giza and the hieroglyph-lined Karnak Temple and Valley of the Kings tombs in Luxor. 
</p>
<a href="#">Top</a>
</article>

CSS styles used:

section {
margin-left: 150px;
border: 3px solid red;  
}

.divider {
border-top: 3px solid red;
}

 img{
float: right;
margin: auto;
}

Seeking help to ensure that the images are positioned correctly within their respective article sections and not inappropriately placed along the dividing lines. Any advice would be greatly appreciated. Thank you!

Answer №1

It seems like you are aiming to create a layout resembling the one below:

section {
    margin-left: 150px;
    border: 3px solid red;  
}

.divider {
    border-top: 3px solid red;
}

.divider:before,
.divider:after {
    content: " ";
    display: table;
}

.divider:after {
    clear: both;
}

figure, img {
    float: right;
    margin: auto;
    width: 100%;
}

h1, h4, p, a, figure {
    margin: 10px;
}

figure {
    max-width: 50%;
    margin-top: -20px;
}
<div class="container"> 
    <section class="left">  
        <h1>Photo Gallery</h1>
        <article>
            <h4>World Capitals</h4>
...
...
...
https://jsfiddle.net/4rzzh713/1/" rel="nofollow"><strong>this Fiddle</strong></a>)</p>
    </div></answer1>
<exanswer1><div class="answer accepted" i="36096624" l="3.0" c="1458338271" m="1458349719" a="Sm9obiBTbGVnZXJz" ai="1946501">
<p>It seems like you are trying to achieve a layout similar to this:</p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>section {
    margin-left: 150px;
    border: 3px solid red;  
}

.divider {
    border-top: 3px solid red;
}

.divider:before,
.divider:after {
    content: " ";
    display: table;
}

.divider:after {
    clear: both;
}

figure, img {
    float: right;
    margin: auto;
    width: 100%;
}

h1, h4, p, a, figure {
    margin: 10px;
}

figure {
    max-width: 50%;
    margin-top: -20px;
}
<div class="container"> 
    <section class="left">  
        <h1>Photo Gallery</h1>
        <article>
            <h4>World Capitals</h4>
            <p>
                A capital city is a city or town, specified by law or constitution,
                by the government of a country, or part of a country, such as a state,
                province, or county. It generally serves as the location of the
                government's central meeting place and offices. Most of the country's
                leaders and officials work in the capital city
            </p>
        </article>
        <article class="divider">
            <h4>Thailand</h4>
            <figure>
                <figcaption>Bangkok</figcaption>
                <img src="http://www.seriouseats.com/images/2012/10/20121015-226179-best-dishes-thailand-bangkok.jpg" alt="Capital of Thailand" title="Bangkok" />
            </figure>   
            <p>
                Thailand is a country on Southeast Asia’s Indochina peninsula
                known for tropical beaches, opulent royal palaces, ancient ruins and
                ornate temples displaying figures of Buddha, a revered symbol. In
                Bangkok, the capital, an ultramodern cityscape rises next to quiet
                canal and riverside communities. Commercial hubs such as Chinatown
                consist of labyrinthine alleys crammed with shophouses, markets and 
                diners.
            </p>
        </article>
        <article class="divider">
            <h4>Egypt</h4>
            <figure>
                <figcaption>Cairo</figcaption>
                <img src="http://cdn.ek.aero/english/images/Cairo_tcm233-2363745.jpg" alt="Capital of Egypt" title="Cairo" />
            </figure>
            <p>
                Egypt, a country linking northeast Africa with the Middle East, dates
                to the time of the pharaohs. Millennia-old monuments still sit along
                the fertile Nile River Valley, including the colossal Pyramids and
                Sphinx at Giza and the hieroglyph-lined Karnak Temple and Valley of
                the Kings tombs in Luxor. 
            </p>
            <a href="#">Top</a>
        </article>
    </section>
</div>

(see also this Fiddle)

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

Manipulate Codeigniter Dropdown to Display Date/Time Query Results

I am relatively new to the world of codeigniter and MVC architecture. Currently, I am in the process of transforming an outdated coldfusion MX website into a fresh new design and layout. My current task involves populating a dropdown menu from a database ...

Firefox does not allow contenteditable elements to be edited if they are nested inside a parent element that is draggable

Here is a basic HTML example: <div draggable=true> <div contenteditable=true>can't edit me</div> </div> When testing in Chrome, I noticed that I was able to edit the contents of the contenteditable div, however, this functi ...

Save picture in localStorage

Hello, I am currently working on a page where I need to retrieve an image from a JSON file and store it locally. Below is the code I have been using: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min. ...

I encountered an error message that said: "Cannot assign '12': 'Cart.product' must be a 'Product' instance. Can someone please assist me in resolving this problem?"

[Included in the image of my code is the add-to-cart function where the error can be found on line 5] def add_to_cart(request): user = request.user product_id = request.GET.get('prod_id') product = Product.objects.get(id=product_id) ...

What is the best way to retrieve text that is viewable to the user when there is a text overflow situation

When using ellipsis in a text input to indicate overflow, is there a way to determine what text is visible to the user versus hidden behind the ellipsis? Thank you for any help! https://i.stack.imgur.com/8iLBQ.png In my scenario, I need to display a list ...

The Less compiler (lessc) encounters an issue on a fresh operating system. ([TypeError: undefined is not a function])

After setting up my new development environment on Windows 10, I encountered an issue with less. Following the instructions on lesscss.org, I installed less using: npm install -g less The installation process completed without any errors. However, when ...

Can you explain the significance of the "row" class in Bootstrap, how it differs from containers, and how it interacts with col-***-*?

I've been browsing through the guide found at http://getbootstrap.com/css/ and I'm having trouble grasping the purpose of the "row" class. I experimented with some examples provided in the guide like: <div class="row"> <div class="c ...

Event emitting from a parent Vue.js component

I can't figure out why my code is not functioning properly. I have an event called 'leave' that should be triggered on blur. The components show up correctly, but the event doesn't fire when leaving the inputs. Vue.component('te ...

Combining various viewpoints into one cohesive SVG

Is there a way to create multiple unique perspectives within a single SVG, or replicate that effect using smart grouping techniques? I aim to display various sections of a potentially extensive SVG without the need for multiple renderings. Is there a str ...

Converting a JavaScript IIFE library into a React Component

Hello, I am currently in the process of learning React JS and there are two JavaScript files that I am working on: Polyfill.js -> hosted on github CustomNavbar.js -> created by me Here is the structure of polyfill.js: export default (function(win ...

Inquiries regarding jQuery's functionality and efficiency

I was wondering about the best way to improve performance? Would it be more efficient to have two images written in HTML, one visible and one hidden, and then use jQuery to toggle their display (hiding the visible one and showing the hidden one)? <img ...

What are some creative ways to design drop-down menus within an email?

The snippet of code I am currently using lacks the ability to format text, and it does not allow content below dropdown items to shift down properly in an email. <select> <option value="first">First-time users of the Vanguard Events app:&l ...

What are the advantages of incorporating JSON for retrieving data from MySQL?

So I have developed a website that retrieves data from a MySQL database using PHP, and then transforms it into JSON format for use with JavaScript. This process can be broken down into 5 steps: Query -> PDO Statement -> PHP Array -> JSON Strin ...

Ways to retrieve the value from a button when it is clicked

I am facing an issue where I have buttons that are generated dynamically depending on the number of phone numbers available in the database. For example, if there are 3 phone numbers in the database, there will be three buttons displayed. The aim is that w ...

display:none !important style elements shown (jQuery)

According to the jQuery documentation on .show() A reminder: If you are using !important in your styles, like display: none !important, you will need to override this style by using .css('display', 'block !important') if you want ...

Troubleshooting issue: Angular not resolving controller dependency in nested route when used with requirejs

When the routes are multiple levels, such as http://www.example.com/profile/view, the RequireJS is failing to resolve dependencies properly. However, if the route is just http://www.example.com/view, the controller dependency is resolved correctly. Below ...

The CSS stylesheets are not compatible with IE7 and IE8

I am encountering an issue with my local site where the CSS links are not being included in the page, particularly in IE7 and IE8. The technologies I am using include WordPress 3.6, Bootstrap 3, Modernizr, and jQuery. Source Code <!DOCTYPE HTML PUBLI ...

What are the ways in which RFC 2854 renders RFC 1867 outdated and irrelevant?

What is the reasoning behind RFC 2854 "obsoleting" RFC 1867? My confusion may arise from a lack of familiarity with how to interpret RFCs, but it seems that RFC 1867 explains the process of file uploading in HTML forms, while RFC 2854 discusses a MIME typ ...

Mastering the fundamentals of integrating/augmenting a fresh template in Umbraco

Let me be completely honest. Umbraco is unlike any other CMS I have worked with before. I am currently struggling to grasp the proper method of creating a Template and integrating it into Umbraco. How exactly can I add a template? I am making changes to t ...

Ways to display a background image on top of a foreground image with CSS

My goal is to have the background image display in front of the foreground image. Despite my attempts with the following code, it did not yield the expected result: .background-image { border :0px; background-image: url(/images/icon.png); ...