Using CSS for layout positioning

This problem has been confounding me for quite some time now, even though the solution is likely very simple. I can't seem to figure out how to align two divs of different sizes side by side without one being pushed down a few lines when text is added to the first div.

Imagine the issue like this:

<html>
    <body>
        <div>
        <div style="background:red; display:inline-block; height:100%; width:50%;">
            aaa<br>
            aaa<br>
            aaa<br>
            aaa<br>
        </div>
        <div style="background:green; display:inline-block; height:5em; width:5em;">
            bbb
        </div>
        <div>
    </body>
</html>

In addition, I'd prefer not to use the "position" property since I don't know the exact size of the "bbb" div and I intend to add more smaller divs below it.

htmlcss

Answer №1

Include the style vertical-align: top; - Check out an example here: http://jsfiddle.net/8KcJ9/2/

Additionally, there is a missing closing tag for your initial <div>, only another opening one present.

Answer №2

Your code contains an error with a wrongly typed closing tag. It should be </div> instead of <div>.

In this case, it is recommended to use the float CSS property set to "left" for both containers rather than using display: inline-block.

To ensure proper layout after your divs, you can add a div with the CSS property "clear" set to "both". Here is an example:


    <div style="background:red; float:left; height:100%; width:50%;">
        aaa<br>
        aaa<br>
        aaa<br>
        aaa<br>
    </div>
    <div style="background:green; float:left; height:5em; width:5em;">
        bbb
    </div>
    <div style="height: 0; width: 0; margin: 0; padding: 0; clear:both;"></div>

Answer №3

Instead of using "display:inline-block", you can utilize the "float:left" property.

Take a look at the code snippet provided below:

<div>
    <div style="background:red; float:left; height:100%; width:50%;">
        aaa<br>
        aaa<br>
        aaa<br>
        aaa<br>
    </div>
    <div style="background:green; float:left; height:5em; width:5em;">
        bbb
    </div>
    <div style="clear:both"></div>
    <p>To ensure that the remaining content does not float and instead appears below these divs, add the class clear:"both" after the floating divs.</p>
<div>

You can view a demo on http://jsfiddle.net/aasthatuteja/eyrAn/

If this solution addresses your problem, please confirm.

Enjoy coding!

Answer №4

give this a shot CHECK OUT THE DEMO

HTML

    <div>
        <div class="first">
            aaa<br>
            aaa<br>
            aaa<br>
            aaa<br>
        </div>
        <div class="second">
            bbb
        </div>
    </div>

CSS

.first{
    background:red;
    display:inline-block; 
    height:100%;
    width:50%;
}
.second{
    background:green; 
    display:inline-block;
    height:5em; 
    width:5em;
    vertical-align:top;
}

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

Utilizing jQuery to Maintain State Across Page Refreshes with Cookies

Currently, I am attempting to create a script that can retain its state even after the page is refreshed. Here is my progress so far: Utilizing jQuery: $(window).ready(function() { var voteId = $('.gallery-item a'); $(voteId).click(function() ...

javascriptjqueryhtmlperformancecookies

Retrieve a value for a textbox by comparing the values of two separate combo boxes

Hey there, I'm brand new to javascript and could really use some assistance. I've got a form with two combo boxes, one for Pass Type and the other for Duration. I'm trying to set a value in a text box based on the user's selections f ...

javascripthtml

The jQuery prop("disabled") function is not operating as expected

Although I've seen this question answered multiple times, none of the suggested solutions seem to be working for my specific example. Hopefully, a fresh set of eyes can help me figure out what's going wrong. Even after adding alerts to confirm t ...

javascriptjqueryhtmljquery-mobile

Arranging images and text side by side with varying breakpoints using Bootstrap classes

In my layout, I have an image and text side by side, with the image appearing first and the text to its left. My goal is to display the text above the image when the screen size is reduced to a small breakpoint, and then switch back to the original layou ...

htmlbootstrap-4

"Eliminated the navigation bar - looking for a way to get rid of the extra

For a recent project, I utilized this template. In this particular project, the navigation bar was unnecessary so I removed that code. Now I'm looking to relocate the carousel to the top of the page. Initially, I tried using .carousel { margin-top:0p ...

cssbootstrap-4

There are currently no articles found that match the search query

Recently, I started working with Django, but I am facing an issue with slug. Whenever I send a request to the Slug, I encounter an error. The error message I receive is: Articles matching query does not exist. Furthermore, I am facing another error while ...

javascriptpythonhtmlcssdjango

Keep table header stationary while accommodating varying column widths

I have come across various solutions for freezing a table header row, such as creating a separate table containing only the header and hiding the header of the main table. However, these solutions are limited to cases where column widths are predetermine ...

htmlcsshtml-table

A step-by-step guide on changing an image

Is it possible to change an image when the user clicks on a link to expand its content? <ul class="accor"> <li> Item 1 <img src="../plus.png"> <p> Lorem ipsum dolor sit amet</p> </li> </ul> $(' ...

javascriptjqueryhtml

When a specific JavaScript function is triggered, the value of an HTML control will reset to its original default value

I have a form with a specific requirement. I need to allow users to input data in a text field and press enter, which should dynamically create new controls like another text field, a dropdown menu, and another text field using jQuery. While the functional ...

javascriptjqueryhtml

Centered Navigation Links with Logo Positioned on the Left in Bootstrap 5

I've been struggling to create a centered navbar in Bootstrap 5 with left-aligned brand logo. Despite trying various flexbox options, I can only manage to center the nav links within a flex container. However, the collapse feature functions correctly. ...

htmlcssnavbarbootstrap-5

How can I pass the color hex value from the controller to the view without using quotation marks?

I'm having trouble sending a value and color pair using JSON. The color value needs to be returned to the JavaScript in the view as color: "#FFFFFF". I can send it to the view that way, but once the browser reads it, it turns into color: &quot;#FF ...

c#javascriptjsonhtmlasp.net-mvc-4

The Mobile Side Menu Is Not Scrollable

I've encountered an issue with the side menu on my website. While it works perfectly fine on PC, it refuses to scroll on mobile devices. I've tested it on both my iPhone 5 and iPad, but no luck. Additionally, the toggle button isn't function ...

javascriptjqueryhtmlcssnavbar

Shifting text higher to the <h1> tag using CSS

I'm currently attempting to move the paragraph header closer to my h1 title. I'm struggling with incorporating the position function and have tried using padding without success. On the image, I am aiming to position the text "Where every connec ...

csstext

Creating an .htaccess configuration for managing case-sensitive file names

Today marked the official launch of my new website, but I've encountered some unexpected issues with the .htaccess file. Despite my best efforts to address them prior to going live, it appears that there are still unresolved problems. You can visit t ...

css.htaccess

Placing a button that is not visible on the screen

As I was designing a webpage for a new company, everything was perfect in the header except for the fact that we didn't have a logo yet. So, I decided to put a placeholder image in its place. Now that we finally have the actual logo and replaced the p ...

htmlcssposition

The view function is not receiving the dynamic Flask URL variable as expected

Trying to pass a dynamic variable from a Flask route into a view function is causing unexpected behavior. Although this should be a standard feature, the code is displaying odd results. Below is the function in question: @bp.route('/<id>/updat ...

pythonhtmlflask

The alignment of h2 headings becomes disordered beyond a specific viewport width

Can someone help me with an issue I'm facing regarding the placement of my "rightside" navigation? The problem arises when the viewport width drops below 767px, causing the h2 elements in the rightnav to align themselves directly next to the #leftnav. ...

htmlcss

Supervise the interaction of users on the Express application

Recently, I began using Express and encountered a situation where I have a <table> on the users page with a link in each row to delete the entry. Whenever a user clicks on one of these links, I need to delete that entry from the database. Since this ...

htmlnode.jsajaxexpressurl-routing

Update the CSS for InputLabel

I have a drop-down list that I want to customize. The issue is illustrated below: https://i.sstatic.net/hzVtl.png I'm looking to center the text "choose format" within the field and adjust the font size. return ( <FormControl sx={{ m: 1 ...

javascriptcssreactjsmaterial-ui

Maintain the webpage content even after submitting a form with a file attachment on the same page

I am in the process of creating a secure webpage exclusively for our members. This page will allow members to access their personal data stored in the database and upload files as needed. One concern I have is how to return to the member page with all the ...

javascriptjqueryhtml