Positioning a div inside another div using CSS

I'm having issues with a nested div causing trouble for me.

<div style="border:solid 20px #ccff33;border-radius:10px;height:300px;width:300px;margin:20px;display: inline-block">
    <img src="images/f35.jpg" style="margin-right:10px" />
    <div style="float:right;padding-left:10px; border-left:solid 1px #aaaaaa; font-size: 12px; display:inline-block">
        Some text here.
    </div>
</div>

My problem is that the output doesn't look as intended:

The inner div is not appearing next to the image within the containing div. I need the text to be positioned on the right side of the image and within the same container.

A couple of things to note: I must stick to using divs (no tables) and all styles need to be inline.

htmlcssstylespositioning

Answer №1

To ensure the image and text are displayed correctly, use float to align the image to the left. Be sure there is enough space within the div for both elements, otherwise the right side may wrap onto a new line. If you do not intend to have a 20px gap between them, choose either margin-right or padding-left.

<img src="images/f35.jpg" style="width:50%; float:left; margin-right:10px" />
<div style="width:50%; float:right; border-left:solid 1px #aaaaaa; font-size: 12px;">

Answer №2

Float the picture to the left and set a specific width for the container, don't forget to clear the floats afterwards...

You can view a demo on this live example http://example.com/demo

<div style="border:solid 15px #ffcc00;border-radius:8px;height:280px;width:320px;margin:15px;display:inline-block">
    <img src="http://www.example.com/image.jpg" style="margin-right:5px; float:left;" width="130"/>
    <div style="float:right;padding-left:5px; border-left:solid 1px #999999; font-size: 11px; display:inline-block;width:140px;" >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam sem non eros condimentum.
    </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

How can I create a component that dynamically adjusts to different screen sizes

I have developed three child components for the main content area (excluding the header) However, one of the components is not responsive. Below is the code snippet: <div className="row" style={{marginTop:'30px',}}> <div class ...

cssreactjsresponsive-design

Positioning items to align an image in the center with both left and right elements

There's a simple question I have for all you HTML and CSS experts out there. I'm attempting to center align a list next to an image, but I can't seem to figure out how to position the list to the left or right of the image. This is what my ...

htmlcss

Guide to creating a square-shaped Bootstrap popup box

Is it possible to change the shape of the bootstrap popup box from rectangular to square? I need it to be a square box. Any help would be greatly appreciated. Thank you in advance. For reference, here is an example: https://i.sstatic.net/APZNt.png < ...

htmlcssbootstrap-4

Different sizes of CSS tables

Creating a responsive layout involves displaying <div> boxes within a grid: The six individual boxes on this page are placed in a row within the HTML source: <div class="control"> <div class="controlContent"> <a>VARIABLE-HEIGHT CO ...

htmlcssresponsive-designcss-floatcss-tables

What is the best way to ensure that custom JavaScript and CSS files in Sphinx are always loaded with the most recent changes

Within the configuration file conf.py for Sphinx, I have specified the following: html_css_files = ['css/custom.css'] html_js_files = ['js/custom.js'] However, any alterations made to custom.js or custom.css do not immediately appear i ...

javascriptcsscachingpython-sphinxbrowser-cache

The text in my image is positioned away from the top

Hi there, I am new to exploring HTML and CSS and I have been trying to display some images and text on a webpage. My goal was to have the text appear next to the image, which is working fine. However, I am encountering an issue where the text aligns itself ...

htmlcssimagetext

styling multiple elements using javascript

Recently, I created a jQuery library for managing spacing (margin and padding). Now, I am looking to convert this library to pure JavaScript with your assistance :) Below is the JavaScript code snippet: // Useful Variables let dataAttr = "[data-m], [d ...

javascriptjqueryhtmlcssvisual-studio-code

Customizing hover color with tailwind CSS

How can I change the color of an icon on mouseover using Tailwind CSS? I have tried to go from this https://i.sstatic.net/ObW6C.png to this https://i.sstatic.net/Tagp3.png, but it's not working. .btn { @apply agt-h-10 agt-w-10 agt-bg-zinc-100 agt- ...

cssangulartailwind-cssstenciljs

How can you confirm the validity of a dropdown menu using JavaScript?

<FORM NAME="form1" METHOD="POST" ACTION="survey.php"> <P>q1: How would you rate the performance of John Doe? <P> <INPUT TYPE='Radio' Name='q1' value='1' id='q1'>1 ...

javascriptjqueryhtml

Having extra space can occur when adding margin to a div within another div in HTML5

I am facing an issue with the following piece of code: <body> <div class="page-top"> * </div> <div class="page-bottom"> <div class="contentbox"> <h1>CONTENTBOX</h1> </div ...

csshtml

Converting HTML to plain text - unclear source encoding

I am currently working on a project involving PHP where I extract HTML content from websites, convert them into plain text, and store them in a database. The challenge I am facing is that I do not know the original encoding of the content. What would be t ...

phphtmlcharacter-encodingarabicstrip-tags

Using Bootstrap 5 to beautifully wrap an even quantity of boxes

My challenge is to optimize the spacing between 4 boxes based on screen size: The layout should adjust as follows: If it's xxl or larger, all 4 boxes should be in a single horizontal row. If it's md or larger, two boxes should be in the firs ...

cssbootstrap-4bootstrap-5

The CSS transition fails to function correctly when rendering a React element within an array

When rendering a React component within an array using CSS transitions, I noticed that the elements in the array re-order and change style. Surprisingly, only the elements moving up have transitions applied, while the ones moving down do not. I expect all ...

javascriptcssreactjscss-transitions

Utilizing the optimal method for aligning text to either the right or left side

I am currently working on creating a container element with multiple child elements. I would like these elements to be aligned differently, some left-aligned and others right-aligned. This includes scenarios where the child elements themselves are containe ...

htmlcss

Creating a zigzag pattern with a linear gradient in CSS

When attempting to create a background color for my body element using linear gradient, I noticed that it resulted in a zigzag effect I experimented with the following code: Body{ background: linear-gradient(45deg, Blue 50%, red 50%) } The outcome wa ...

htmlcsslinear-gradients

Attempting to modify the background color of an iFrame in Internet Explorer

I am experiencing an issue with my webpage where the iFrame is displaying with a white background in IE, while it shows up with a blue background in Firefox and Chrome. I have attempted various solutions to make the background of the iframe blue or transpa ...

javascripthtmlcssinternet-exploreriframe

Checking all checkboxes in a list using Angular 5: A simple guide

I have a list that includes a checkbox for each item, and I want to confirm if all of them are checked off. This is the HTML code snippet: <ul class="ingredient-list" > <li class="btn-list" *ngFor="let ingredient of recipe.ingredients"> ...

javascripthtmlangularangular5

The CSS linear gradients rainbow wheel is missing a few sections, only displaying part of its 12

I've almost got everything working, but I'm facing a challenge in displaying all 12 sections of the rainbow wheel. I know it's probably something very simple (Occam's razor). I've been following this amazing tutorial on CSS linear ...

htmlcss

What are the best scenarios for utilizing the Bootstrap class “.embed-responsive-item”?

I'm hoping for some help understanding the purpose of the ".embed-responsive-item" class in the code snippet below (Bootstrap code for responsive iframes, videos, etc.). It seems redundant to apply this class to the iframe element when it works just f ...

csstwitter-bootstrapiframetwitter-bootstrap-3

Footer not being pushed down by content in mobile view on page

Hello everyone, Can you assist me with a query, please? My form works perfectly fine in desktop view, but it gets cut off on mobile view and I'm unsure of the reason why. Here is my code: .upload-pic { position: absolute; max-width: au ...

htmlcsstwitter-bootstrapbootstrap-4