Having trouble getting my image and text to align properly in two columns

<img id="story_image" src="images/builder_story_side.png" alt="photo"/>

<div id="story_right">
<h2 class="story_header">fdgdfgdfgdfgdfgfdgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg</h2>
<p class="small_story">fdgdfgdfgdfgdfgfdgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgfdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg</p>
</div>



img#story_image{float:left;}

div#story_right{float:left;}

I have experience with setting up two columns, but it seems that this time I am facing some challenges. My intention is to place the image in column one and the text in column two. However, the story_right section keeps appearing below the image instead of side by side. It appears as if the story_image element is being treated as a block element.

css

Answer №1

In order to effectively float elements, it is essential to define a specific width for the elements you wish to float. Both fixed pixel and variable percentage widths are suitable options. The issue you are experiencing is likely due to the default 100% width of a div, preventing the image from floating alongside it.

Answer №2

To achieve this, simply adjust the widths of the elements.

Styling with CSS

#story_image{width: 50%;float:left;}
#story_right{width: 50%;float:left;}

See an example here:

http://jsfiddle.net/loktar/nnU26/1/

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

Positioning a div at the bottom of a webpage without using absolute positioning in HTML

Check out the fiddle. I've included some CSS to position the tab on the right side. My goal was to have those tabs in the lower right corner of the container. If I use absolute positioning for the div, it messes up the tab content width. I tried ad ...

javascriptjqueryhtmlcss

Adding color to the header's top section and leaving the navigation bar untouched

A few days ago, I posted a question on this platform regarding customizing CSS related to search forms within Bootstrap. The response I received from Charlie was incredibly helpful in refining the code for my header and navigation elements. You can view hi ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Immersive jQuery slideshow embellished with an interactive counter, captivating thumbnails, dynamic progress bar,

Hey there! I'm currently working on my very first website and I could really use some assistance in creating a slider with images. I've tried searching for a solution to my problem online, but even after attempting to fix the suggested plugin, I ...

javascriptjquerycssslideshow

I attempted to update the text on an HTML page using the content of "conetnt", however, it was unsuccessful

.custom-div { outline: none !important; width: 450px; margin: auto; background-color: #ccc !important; text-indent: -9999px;} .custom-div::before{content: 'sample';color: black;} ...

htmlcss

Tips for rendering the stencil as invisible and disabled while still allowing other features (such as rotating and flipping) to remain enabled within the react-advanced-cropper

I am facing a challenge where I need to hide and disable the stencil and overlay in react-advanced-cropper, while keeping all other features like rotation and flipping enabled. Is there a specific property in this library that allows me to disable the st ...

javascriptcssreactjsimage-cropper

What is the appropriate conversion for a CSS property name starting with -webkit when working with React?

For example, using `-webkit-text-fill-color` resulted in an error when setting it to `'red'`, stating "Using kebab-case for CSS properties in objects is not supported. Did you mean WebkitTextFillColor?" I have attempted `WebkitTextFillColor`, `w ...

cssreactjswebkitkebab-case

Ways to eliminate the excess space surrounding an Image border

I am looking to position the image at the top right corner of the screen. body{ font-family: 'Roboto', sans-serif; font-weight: 300; background: #822B2B; color: #ffffff; overflow: hidden; } #showcase{ display: flex; justify-content: center; al ...

htmlcssimagebackgroundspace

Can a PHP variable be passed along with a div ID in any way?

I am attempting to transfer a PHP value through the "href" attribute from one div to another. While we can achieve this between pages, like so: <a href="somepage.php?id=<?php echo $id;?>"></a> Is there a way to accomplish this using an ...

phphtmlcss

Tips for adjusting the maximum width and content-based width for columns within an HTML/CSS table

I'm working on a simple HTML/CSS code featuring a container with two adjustable slots, controlled by a handler in the middle to modify the space each slot occupies. The first slot contains a table with fixed columns, automatic columns, and limited col ...

htmlcss

Issue with bouncing dropdown menu

I am in the process of enhancing a Wordpress website by implementing a jQuery menu with sub-menus. Below is the jQuery code snippet: $(document).ready(function(){ $('.menu > li').hover(function(){ var position = $(this).position(); ...

javascriptjqueryhtmlcsswordpress

What is the best way to arrange images in a 3 by 3 grid, beginning at position 0, using JavaScript to control navigation through button clicks?

When I click on button 1, it starts at image 1 because the counter is set to 0. Clicking on button 2 takes me to image 4 with a counter value of 3, while clicking on button 3 leads to image 7 with a counter value of 6. The process should also work in reve ...

javascripthtmlcssimage

Overcomplicating div elements with unnecessary cloning during checkbox usage

Whenever I check the checkbox and press OK, I want to clone a div with specific user details. Everything works as expected when selecting multiple users. However, adding more users without unchecking the previous checkboxes results in cloned buttons but no ...

jqueryhtmlcss

On the initial page load, Magento is failing to load the CSS properly

I've been tinkering with the Magento website over at For some reason, the CSS on the Home page doesn't load initially, but it loads fine when you click on any other link like Products or Gallery. Any ideas why this might be happening? Thanks in ...

cssmagentoload

Choosing premier class and modifying characteristics

Looking for a solution to hide a div without modifying the HTML code directly? By using JQuery, you can manipulate the appearance of elements on a page. While it's possible to select the first instance of a class and retrieve its value, adding an attr ...

javascriptjquerycss

CSS for a navigation menu with underlined links

I am attempting to create an underline effect when hovering over a link. However, I am facing an issue where the underline does not align perfectly with the line below it. Can someone please guide me on how to modify this CSS so that when the link is hov ...

htmlcss

Show two <p>'s next to each other

I am trying to arrange 2 paragraphs side by side. <p class = "firstClass">This is the first paragraph.</p> <p class = "secondClass">This is the second paragraph.</p> Result: This is the first paragraph. This is the second paragra ...

htmlcssparagraph

Creating a layout with an image positioned on the left and text on the right within a block using CSS

Can anyone provide guidance on how to design a layout similar to the one shown in this image: https://i.sstatic.net/RYAuA.png? I want the image on the left and text on the right, with responsiveness. Any help would be greatly appreciated. Thank you! < ...

htmlcssbootstrap-5

The div element displays a vertical scrollbar exclusively

Can you explain why the div is only displaying a vertical scrollbar? Although the canvas is larger than the div in both dimensions: div { padding-top: 2px; height: 709px; width: 889px; overflow: auto; } <div> <canvas width="1405" sty ...

htmlcsscanvas

Utilizing Jquery for draggable/droppable functionality in combination with custom overflow styles

Encountering a challenge with a drag and drop system that utilizes CSS overflow properties to enable vertical scrolling of a list of values. The issue arises when dragging an item between selected and unselected areas, causing the dragged item to disappear ...

jquerycssjquery-uidrag-and-drop

Tips for utilizing FixedHeaderTable - Basic instructions required

After doing extensive research, I stumbled upon this plugin called Fixed Header Tables. Despite following the instructions provided on the main website, I couldn't get it to work. I was aiming to create a table with a fixed top row and left column fu ...

jqueryhtmlcsshtml-tablefixed-header-tables