HTML and CSS: Aligning Text on the Left and Image on the Right - A Guide to Positioning Elements

Just starting out with HTML and CSS, I've run into some issues while writing my code. My goal is to have

  • Text (on the left middle part) and image (on the right middle part) displayed side by side
  • A responsive design that stacks the text on top of the image

Here are my questions:

  1. How can I align my image to the right so it lines up with the text on the left?
  2. Both text and image seem to be shifted downward.
  3. When resizing my browser, the layout becomes unresponsive and falls apart. How can I prevent this from happening?

Thanks in advance!

.first_section {
    background-image:url('http://i347.photobucket.com/albums/p462/jimprince1990/zinc-white_zpsiibjtmdi.jpg');
    background-position:center top;
    background-size: cover;
    padding: 200px 150px;
    margin: 0 30px;
    font-family: 'Trebuchet MS', 'Helvetica', 'sans-serif';
}

#first_section_text {
    float: left;
    text-align: left; /*Set everything to the left */
    display: block;
    width: 50%;
}

#first_section_image {
    float: right;   /* float property can be used to wrap text around images */  
    width: 50%;
    height: 50%;
    display: block;
}
        <div class="first_section">

            <div id="first_section_text">
                <p>IT'S OFFICIALLY SANDWICHES SEASON</p>
                <p>This summer, we've got more sandwiches options than ever. From the new mexican style to our classic chicken and beef sandwich, there's a style to fill you up on any hot day.</p>
                <a href="navigation_bar/sub_menu/sandwiches.html">Explore now!</a>
            </div>

            <div id="first_section_image">
                <img src="http://i347.photobucket.com/albums/p462/jimprince1990/Sandwiches_zps99hlhkod.jpg" height= "235" width= "235"/>
            </div>           

        </div>

htmlcssresponsive

Answer №1

Check out the snippet below or try it out on this jsfiddle link

Firstly, the padding on the .first_section is causing your content to be positioned too low, resulting in a skewed appearance of both text and image.

Secondly, utilize float:left; and set a specific width on .first_section to ensure it adjusts its height based on the content inside.

I have used width:90% with margin:0 5% to accommodate the desired margins on both sides.

To properly align the text above and the image below it when the screen size decreases, employ media queries. In this case, I applied a media query for screens smaller than 640px, but feel free to modify as needed.

Within that media query, add width:100% to both text and image elements so they stack one after another.

Please let me know if these suggestions are helpful.

.first_section {
    background-image:url('http://i347.photobucket.com/albums/p462/jimprince1990/zinc-white_zpsiibjtmdi.jpg');
    background-position:center top;
    background-size: cover;
    float:left;
    width:90%;
    margin: 0 5%;
    padding:15px;
    box-sizing:border-box;
    font-family: 'Trebuchet MS', 'Helvetica', 'sans-serif';
}

#first_section_text {
    float: left;
    text-align: left; /*Set everything to the left */
    display: block;
    width: 50%;
}

#first_section_image {
    float: right;   /* float property can be used to wrap text around images */  
    width: 50%;
    height: 50%;
    display: block;
}

@media only screen and (max-width: 640px) {
 #first_section_image  { float:left;width:100%;}
 #first_section_text{ float:left;width:100%;}

}
<div class="first_section">

            <div id="first_section_text">
                <p>IT'S OFFICIALLY SANDWICHES SEASON</p>
                <p>This summer, we've got more sandwiches options than ever. From the new mexican style to our classic chicken and beef sandwich, there's a style to fill you up on any hot day.</p>
                <a href="navigation_bar/sub_menu/sandwiches.html">Explore now!</a>
            </div>

            <div id="first_section_image">
                <img src="http://i347.photobucket.com/albums/p462/jimprince1990/Sandwiches_zps99hlhkod.jpg" height= "235" width= "235"/>
            </div>           

        </div>

Answer №2

.section_one {
    background-image:url('http://i347.photobucket.com/albums/p462/jimprince1990/zinc-white_zpsiibjtmdi.jpg');
    background-position:center top;
    background-size: cover;
    padding: 200px 150px;
    margin: 0 30px;
    font-family: 'Trebuchet MS', 'Helvetica', 'sans-serif';
}

#section_one_text {
    float: left;
    text-align: left; /*Set everything to the left */
    display: block;
    width: 50%;
}

#section_one_image {
    float: right;   /* float property can be used to wrap text around images */  
    width: 50%;
    height: 50%;
    display: block;
}

@media screen and (max-width: 600px) {

#section_one_text
  , #section_one_image{
    width: 100%;
    float: left;
  }
}
<div class="section_one">

            <div id="section_one_text">
                <p>SUMMER IS HERE, TIME FOR SANDWICHES</p>
                <p>This season, explore our variety of sandwich options. From new flavors like Mexican style to the traditional chicken and beef sandwiches, we have something for everyone on a hot day.</p>
                <a href="navigation_bar/sub_menu/sandwiches.html">Discover now!</a>
            </div>

            <div id="section_one_image">
                <img src="http://i347.photobucket.com/albums/p462/jimprince1990/Sandwiches_zps99hlhkod.jpg" height= "235" width= "235"/>
            </div>           

        </div>

Answer №3

Kindly review the code snippet below. I have retained your markup and css, with some modifications. The objective is to display the image first followed by text in mobile view. To achieve this, I rearranged the markup to place the image before the text and applied floats in the css. For mobile view, I removed floats so that the image appears first and then the textual content. Feel free to test out this solution :)

.first_section {
  background-image:url('http://i347.photobucket.com/albums/p462/jimprince1990/zinc-white_zpsiibjtmdi.jpg');
  background-position:center top;
  background-size: cover;
  height:300px;
  margin: 0 30px;
  padding:100px 20px;
  font-family: 'Trebuchet MS', 'Helvetica', 'sans-serif';
}

#first_section_text {
  float: left;
  text-align: left; /*Set everything to the left */
  display: block;
  width: 50%;
}

#first_section_image {
  float: right;   /* float property can be used to wrap text around images */  
  width: 50%;
  display: block;
}

@media (max-width:480px){
  #first_section_image{
    float:none;
    width:100%;
    text-align:center;
    }
  #first_section_text{
    float:none;
    width:100%;
    text-align:center;
    }
}
<div class="first_section">
  <div id="first_section_image">
    <img src="http://i347.photobucket.com/albums/p462/jimprince1990/Sandwiches_zps99hlhkod.jpg" height= "235" width= "235"/>
  </div>           
  <div id="first_section_text">
    <p>IT'S OFFICIALLY SANDWICHES SEASON</p>
    <p>This summer, we've got more sandwiches options than ever. From the new mexican style to our classic chicken and beef sandwich, there's a style to fill you up on any hot day.</p>
    <a href="navigation_bar/sub_menu/sandwiches.html">Explore now!</a>
  </div>
</div>

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

Type content in HTML5

Can you help me with a simple question? I am currently working on building my portfolio using html https://i.stack.imgur.com/rxYRS.png I want to be able to click on an image and add the description of my choice. Right now, it is showing something else: ...

csshtmlproject

Despite following all the correct steps, the tailwind CLI remains unresponsive. Additionally, the default button fails to display any content

view the document and my packages (image) Although it worked with the cdn, I'm puzzled why I can't use it properly with the cli ...

htmlcssnpmtailwind-csstailwind-ui

Tips for securely transmitting data via a hidden form using the POST method

I have a query that displays records of people, and I want to send the id_Persona using a hidden form through a post function to the idsPersonas.php page. However, when I try to do this, it redirects me to an undefined page. Here is the code snippet: < ...

javascriptphpjqueryhtmlmysql

Issues with CSS styling are affecting the display of a form

Hey there! I was working on creating an order form for my website, and everything was going smoothly until I hit a snag while styling the webpage. The problem is that the legends of the form are extending all the way to the right side of the page, and the ...

css

The functionality of the bootstrap grid system may vary depending on the size of the device being

I'm currently experiencing an unusual issue with Bootstrap. From what I understand, the bootstrap grid system is based on 12 units and is supposed to work seamlessly across various device sizes, such as iPhones. I have a simple banner comprised of 5 c ...

htmltwitter-bootstrapcss

The component is not responding to list scrolling

Issue with Scroll Functionality in Generic List Component On the main page: <ion-header> <app-generic-menu [leftMenu]="'left-menu'" [rightMenu]="'client-menu'" [isSelectionMode]="isSelectio ...

htmlangulartypescriptionic-frameworkionic4

The resizing of the background image is contingent upon the size of the

I am facing an issue with my bootstrap carousel. One of the items only contains a background image without any content. I have set a height for it so that it is still visible even without content. However, when viewing on mobile devices, I can only see a p ...

jqueryhtmlcsstwitter-bootstrap

Fade in a CSS class using jQuery

I'm attempting to incorporate a basic fadeIn() CSS effect on specific objects that are tagged with the "button" class. My goal is to have the "hoverbutton" class fade in when the object is hovered over, and then fade out when the cursor moves away fro ...

jquerycssjquery-uifadein

Is it possible to construct an IFrame using URL parameters?

Looking to implement an iframe that displays a page provided as a parameter in the URL using ASP.NET MVC4. Here's the approach I have in mind: Updated the code but it still doesn't seem right to me. <?php if(!isset($_GET['link'] ...

phphtmlasp.net-mvc-4

The requested resource at http://localhost/Grafica/%7Bd.icon%7D/ was not found (Error 404)

Creating a tooltip in a weather chart, I want to display an image of the sky condition. Below is the HTML code: <div id="tooltip"> <table class="table table-condensed"> <tr><th>Time (local)</th><th data-text="d ...

javascripthtml

Ensuring Input Integrity: Utilizing HTML and Javascript to Block Unfilled Form Submissions

Currently, I am working on developing a registration page using HTML and JavaScript. Although I have added the 'required' tag in HTML to prevent users from submitting empty input fields, I noticed that users can bypass this restriction by simply ...

javascripthtml

What is the best way to disable the button hover effect after it has been clicked?

Many posts I've come across have similar issues to mine, but the suggested solutions are not working for me. I am struggling to remove the hover property of my button when it is clicked before triggering the removal event I have set up. Edit: Just t ...

javascripthtmljquery

bootstrap modal dialog displayed on the edge of the webpage

I am facing an issue with a modal dialog that pops up when clicking on a thumbnail. The JavaScript code I used, which was sourced online, integrates a basic Bootstrap grid layout. The problem arises when half of the popup extends beyond the edge of the pa ...

javascripthtmlcsstwitter-bootstrapmodal-dialog

What are the steps to ensure the effective functioning of my checkbox filter?

Currently, my product list is dynamically created using jQuery. I now need to implement filtering based on attributes such as color, size, and price. I found some code that filters the list items by their classes, which worked perfectly for someone else. ...

javascriptjqueryhtmljsoncheckbox

A DIV element may not have any visible height, even when it contains content

My <div> contains multiple <img> elements, each wrapped in its own inner <div>. Despite setting the outer div's height to auto, it fails to adjust dynamically based on the content. To display the inner divs inline, I've applied ...

csshtml

Avoiding overlapping of div elements in a stacked div layout

I have a challenge with creating a vertical layout of stacked divs. Everything was going smoothly until I encountered the #resume div, which stubbornly stays hidden beneath the table-containing div above it. Despite trying various adjustments to float and ...

htmlcss

What is the best way to equalize the size of mismatched images in CSS?

My Objective https://i.sstatic.net/KgK0F.png I aim to align images of different sizes and shapes within the same frame using only CSS. The image size should adjust proportionally as the browser window is resized. Current Progress JSFiddle Curr ...

htmlcss

Is it possible to create a sticky element that stays fixed to the window without using JavaScript?

Using position: sticky has been a game-changer for me. It resolves many issues without the need for JavaScript. However, I've encountered a roadblock. I am trying to create a sticky element that is nested inside multiple <div> elements. Since po ...

javascripthtmlcss

Using a zoom background image in an HTML document without any accompanying text

I am trying to create a zoom effect on a background image without affecting the text overlaying it. Here is the CSS code: .page1-box { width: 1200px; height:800px; overflow:hidden; } .page1 { width: 100%; height: 100%; background: ...

jqueryhtmlcss

Load image in index.html for use on a different webpage

I'm looking to preload a large image that serves as the background on another page of my website. By preloading this image, I hope to ensure that when users first visit my webpage, the image is ready to load instantly when they eventually navigate to ...

htmlimagepreload