The text is on the left side while the image is placed

I've been attempting to align text on the left and an image on the right within a div. While I stumbled across several examples on Stackoverflow where the image is on the left and the text on the right, I couldn't seem to flip them around successfully. I came across this thread on stackoverflow, but it didn't quite click for me.

I even experimented with this JSFIDDLE, yet it still didn't do the trick.

.main-topic {
    border: 2px solid green;
    width: 1541px;
    margin: 0 auto;
    clear: both;
}

.left-text{
    vertical-align:middle;
}

.right-picture{
    float: right;
}

.right-picture > img{
    display: block;
}

.clear{
    clear: both;
}

The layout I'm aiming for looks like this (unfortunately, I can't upload images due to my low reputation). Essentially, I want the text on the left side of the bordered div and the image on the right side.

Answer №1

To easily achieve the desired layout, simply include display: flex; to the .main-topic class.

You can then safely delete the following CSS as it is no longer necessary:

.right-picture{
    float: right;
}

See the Code in Action

Edit:

If you do not need specific width and height values, consider removing width from .main-topic and height from section for an improved result.

This involves eliminating width: 1541px; from .main-topic and height: 500px; from section.

View Updated Fiddle Here

Answer №2

Adjust the CSS styling by removing float:right from img and adding float:left to .left-text

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

ul.topnav {
list-style-type: none;
/*position: fixed; */
overflow: hidden;
margin: 0;
padding: 0 0 0 400px;
background-color: #110E0C;
   /*width: 100%;
   top: 0; */
}

ul.topnav li {
float: left;
}

ul.topnav li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 14px 30px;
text-transform: uppercase;
/*background-color: #3F4345;*/
}

ul.topnav li a:hover {
background-color: #C8D0D7; 
color: #D8610C;
border-bottom: 1px solid #D8610C;
}

ul.topnav li a.active {
background-color: #C8D0D7;
color: #D8610C;
border-bottom: 1px solid #D8610C;
}


header {
width: 100%;
padding: 2px;
color:black;
background-color: #C8D0D7;
text-align: center;
overflow: hidden;
}

header img {

height: 150px;
width: 150px;
margin-left: 900px; 
float:left;

}
header p {
padding: 40px;
}

section {
background-color: #333333;
height: 500px;
}

section img {
border: 1px solid white;
height: 400px;
width: 500px;
}

section h3 {
color: white;
}

section p {
color: white;
height: 170px;
width: 600px;
padding: 0;
margin: 0;
line-height: 20px;
vertical-align: top;
}

.main-topic {
border: 2px solid green;
width: 1541px;
margin: 0 auto;
clear: both;
}

.left-text{
vertical-align:middle;
  float:left;
}

.right-picture{

}

.right-picture > img{
display: block;
}

.clear{
clear: both;
}
<section>
<div class="main-topic">
<div class="left-text">
<h3>Deadpool Fans Petition 'SNL' for Superhero to Host</h3>
<p>
Deadpool fans want its superhero to host Saturday Night Live — Deadpool, that is, not Ryan Reynolds. Fans of the Merc With a Mouth, who led the Marvel film to a history-making debut at the box office, have launched a Change.org petition calling for the antihero to host an upcoming episode of the NBC sketch comedy show. "We've all seen the trailers, the magazine covers, the viral videos, and the billboards by now, so what's left for Deadpool (Ryan Reynolds) to do?" creator Andrew Stege asks in the petition, which is directed to SNL, creator Lorne Michaels, parent.
</p>
</div>
<div class="right-picture">
<img src="http://cdn3.whatculture.com/wp-content/uploads/2015/10/f5S3dvUb.jpg">
</div>
<div class="clear"></div>
<div>
</section>

Answer №3

Have you considered this approach: http://jsbin.com/felabezuzu

You can achieve the desired layout by floating the text div to the left and setting its width to 50% (or any other value). Then float the image div to the right, taking up the remaining width. Don't forget to set max-width:100%; for the img to ensure everything fits on the page.

Answer №4

I made some improvements to your fiddle by removing unnecessary height/width settings and making changes to the CSS rules below, resulting in a better appearance

.main-topic {
    display: table;
    border: 2px solid green;
    margin: 0 auto;
}

.left-text{
    display: table-cell;
    vertical-align:middle;
}

.right-picture{
    display: table-cell;
}

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

Unusual behavior observed when calculating in Angular

Utilizing Angular.js, I dynamically calculate the height and add the value to the CSS style attribute within an ng-repeat loop. The issue arises with this particular line of code: <div style="height: {{60.0 / 100.0 * (100 - (100.0 / 0.27 * (item.wert ...

The CSS on the IIS 7 server is not functioning properly, unlike when it is on a

Upon debugging my ASP MCV 4 Application on Visual Studio 2012, I have encountered an issue with CSS not displaying properly after deploying it to IIS 7. It seems that some styles are missing in the live environment compared to how they appeared locally. I ...

Implement rounded corners to bootstrap table

After working on this fiddle with a bootstrap table, I encountered an issue where I was unable to apply the desired border-radius to it. Can someone shed some light on why this is happening and provide guidance on how to successfully implement it? This is ...

Flexbox Resizing Notification(?)

Recently, I've been utilizing flexbox in my layout design and it has been a game-changer. However, I am facing an issue that might be linked to my heavy use of AngularJS, particularly the ng-include feature. The specific problem arises when I incorpo ...

Teaching sessions along with the implementation of functions

I've created a set of input fields with the class replaceInput. The idea is to have a simple function that clears the value when the user focuses on the field, and then returns it to 'X' if the field is empty on focus out. My query is, coul ...

Is it possible for me to execute index.html using React without relying on npm start and npx create-react-app?

As I dive into learning React on my own, I find myself tangled in confusion. My initial approach was to add React to my index.html using a script like this: //index.html <!DOCTYPE html> <html lang="en"> <head> <title> ...

What is the procedure for modifying the height of a button in HTML?

I wanted to add a flashing "Contact Us" button to the menu bar of my website to immediately attract people's attention when they visit. Here is the javascript code I used: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&g ...

The previous and next buttons are displaying side by side rather than being positioned at the outer edges

I am having an issue where the prev and next buttons are displaying next to each other instead of at the edge of the div. Can someone please assist me in fixing this problem? Below is the provided HTML code: <div id ="moreOption_80322271" class="m ...

Image not being shown by ng-src

I'm struggling to get my picture to display using ng-src. <img ng-src="http://localhost:3000/images/{{image.image}}" class="img-circle" alt="User" style="width: 130px; height: auto;"> Although the data is present when I console log this: ...

What's the reason popstate does not trigger in Safari during the loading of an iframe?

When using Safari, I've noticed that if an iframe is loading and the user changes the history state by navigating back or forward, the popstate event doesn't get triggered. This results in the application state being out of sync with the window l ...

Does the media query max-width refer to the size of the viewport or the size of the window?

Can someone clarify whether the max-width in a media query is based on the viewport size or window size? For instance, consider this media query: @media screen and (max-width: 360px){} Would this media query be activated when the viewport reaches 360px ...

When the canvas is dragged, an item within it suddenly leaps or bounces

I've noticed that when I drag the canvas using -webkit-transform: translate(x,y), an element on the canvas jumps. Are there any suggestions for addressing this issue? ...

Enhancing page accessibility through the implementation of shortcuts

Greetings to all members of the community! I am currently in the process of improving a website by implementing better accessibility practices. I have some concerns regarding a page that displays a large number of repeated result blocks, each containing ...

What is the best way to align the navbar-brand link in the middle of a Bootstrap 4 navigation bar?

This question may seem like a duplicate, but it is not. I am specifically asking about Bootstrap version 4.3 and not any earlier versions. The answers I have found so far are either not applicable to the current version (useless for updated projects), or ...

Generate a two-dimensional array of pixel images using HTML5 canvas

Hey everyone, I'm trying to copy an image pixel to a matrix in JavaScript so I can use it later. Can someone take a look and let me know if I'm using the matrix correctly? I'm new to coding so any help is appreciated. Thanks! <canvas id= ...

What is the process for executing a GET/POST request and receiving a JSON response on a webpage?

I am working on a page that has a JSON result, with both get and post methods in the controller. There are two submit buttons - one that redirects to the Post method and another that goes to the JsonResult method (named AddTableData). How can I set this up ...

Styling Your Navigation Bar with CSS and Active States

Creating an interactive navigation element for a menu can be challenging, but here's a helpful example. http://jsfiddle.net/6nEB6/38/ <ul> <li><a href="" title="Home">Home</a></li> <li class="activ ...

Challenges with the height of the sticky footer in Bootstrap 4

I'm currently in the process of constructing a website using bootstrap 4 that features a footer with 3 columns. Everything looks great when the browser window is large, such as on a PC, but when it's compressed, like on a mobile phone, only a por ...

Tips for changing the background color of a Qtextedit?

After experimenting with HTML, I discovered that using type bgcolor="#ffd814" will change the background color in textedit. But how can I achieve the same result using QAction and QColorDialog? This is the method I tried: void MainWindow::on_actionBackgr ...

Is it possible for me to load a window following a click

I developed a customized Modal Box that functions similar to the browser's "alert()". When using the traditional alert(), it halts the rendering and executions of the underlying webpage. I am seeking methods to achieve this same behavior: preventing ...