An effective method to arrange divs in a line adjacent to each other

Apologies for the repetitive question, but I am in need of some answers.

In my opinion: Having 1 div with a width of 100% and 2 divs inside each with a width of 50%. Why does it not fit properly?

HTML:

<div id="top-menu">
   <div id="logo"></div>            
   <div id="menu-top"></div>
</div>

CSS: 

#top-menu{
    width: 100%;
    height: 100px;
    position: relative;
    border: 1px solid black;
    background-color: #A3238E;
}

#logo{
    width: 50%;
    height: 100px;
    position: relative;
    display: inline-block;
    background: orange;
}

#menu-top{
    width: 50%;
    height: 100px;
    position: relative;
    display: inline-block;
    background: green;
    left: 0;
}

I notice a small blank space between the two divs, and I am unsure how to remove it... Also, setting the second one to Width: 49% seems to work... But it doesn't with 50%, presumably due to that little space between them.

Any solutions on making it function as intended?

csshtmlcss-position

Answer №1

To achieve the desired layout, you should utilize the following CSS:

#top-menu{
    width: 100%;
    height: 100px;
    position: relative;
    border: 1px solid black;
    background-color: #A3238E;
}

#logo{
    width: 50%;
    float:left;
    height: 100px;
    position: relative;
    display: inline-block;
    background: orange;
}

#menu-top{
    width: 49%;
    float:left;
    height: 100px;
    position: relative;
    display: inline-block;
    background: green;
    left: 0;
}

I made sure to add float:left; to the two divs that need to be placed next to each other. In your HTML code, apply the following structure:

<div id="top-menu">
   <div id="logo"></div>            
   <div id="menu-top"></div>
   <div style="clear:both;"></div>
</div>

Additionally, observe the inclusion of 

<div style="clear:both;"></div>
which effectively clears the float:left;. Alternatively, you can also use 
<div style="clear:left;"></div>
for the same purpose if preferred.

Answer №3

The issue is arising due to the utilization of inline-block: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

To resolve this, replace display: inline-block; with float: left;

After making this change, you can also include overflow: hidden in the #top-menu to clear the floats.

UPDATE:

In order to successfully apply the overflow: hidden clearfix technique, it is advisable to eliminate height: 100px from #top-menu.

Answer №4

#top-menu{
    width: 100%;
    height: 100px;
    position: relative;
    border: 1px solid black;
    background-color: #A3238E;
    display: table;
}

#logo{
    width: 50%;
    height: 100px;
    position: relative;
    display: table-cell;
    background: orange;
}

#menu-top{
    width: 50%;
    height: 100px;
    position: relative;
    display: table-cell;
    background: green;
}

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

Is there a way to extract and exhibit the text from an image using Python?

Could someone assist me in extracting only the text within the highlighted red area? I have been experimenting with Python but haven't been successful in achieving this. My goal is to create a script that prompts for an address, then opens Firefox (or ...

htmlpython-3.xseleniumtextdisplay

Avoid making the check mark disappear in an SVG animation

After perfecting my CSS animation, I have the circle looping around to complete its shape while a check mark fills in the middle with a slight delay. Once both shapes are completed simultaneously, the check mark disappears. The reason for the disappearing ...

csssvgcss-animations

What is the best way to incorporate Bootstrap's datepicker into a website?

I'm currently working on an AngularJS application. Here is the code I have: <directive date="date" date-format="YYYY-MM-DD" > <input ng-model="Date" type="text"/> </directive> Is there a way to integrate an Angu ...

angularjshtmltwitter-bootstrapdatepicker

Guide on making a flowchart using CSS

I'm working on creating a CSS flow chart diagram and I've included an image below for reference. Might there be a straightforward method to achieve this? I've been scouring the web for examples, but I'm unsure of what terminology to use ...

htmlcss

Bug with IOS double tap on Element UI VueJS select input element

Encountering a strange problem on iOS safari or chrome. When attempting to select an option from a dropdown input, the options show up correctly on the first tap, but when trying to actually select an option, it requires two taps to work properly. This is ...

cssiosvue.jsmobile-safarielement-ui

The value property of the input element is returning as undefined

The input value entered is always returning undefined. Despite trying various solutions found in similar questions, my jQuery code continues to return undefined. jQuery: $( document ).ready(function() { $('#Input').keypress( function(e ...

jqueryhtmlcss

Is there a way to keep the text animation going even when I'm not hovering over it with the cursor?

Is there a way to make text continue animating on the page even when the cursor is not placed on it? I understand the hover function, but how can I ensure the text keeps animating without interruption? $(document).ready(function () { $("#start&q ...

javascripthtmljquerycss

Managing content in two separate divs at the same time using AJAX

I am curious to know how I can achieve a functionality where editing the text field on the left will automatically update the text field on the right. I have a feeling that it involves using AJAX, and I would like to implement it as well. Can anyone guid ...

htmlajaxformsjquery

What is the best way to place content in a single div without it being divided into several separate boxes

Here is my code snippet: <div class="col-md-9"> <div id="statbox"> {% for obj in product_type %} {% for obj1 in vastu %} <script type="text/javascript"&g ...

javascripthtmlcssdjango

What are some ways to modify the appearance of the post title table using CSS?

In this snippet of HTML code- <table style='min-width:60%;height:25px;'> <tr> <td><b><data:post.title></b></td> <td id='date-and-author' style='position: relative;bo ...

htmlcsshtml-table

Display icons next to badges in a Bootstrap list for a visually appealing design

I am facing a challenge with my Twitter Bootstrap list that includes badges and a delete icon. There are two issues I need assistance with: The badge is automatically positioned to the right of the list row, but I would prefer the delete icon to come aft ...

htmlcsstwitter-bootstrap

When pasting Arabic text into an input box, the words in HTML appear to be jumbled and shuffled around

When I replicate this text يف عام and input it into a box, the output is shown as follows عام يف ...

javascriptcsshtmlarabic-support

What is the best way to create space between three columns in Bootstrap?

Despite my efforts to find a solution on Stackoverflow, I have not been able to locate exactly what I need. I am trying to evenly space and center three columns across my page. However, when I assign col-md-4 to each column, they end up too close together ...

htmlcsstwitter-bootstrap

Conflicting styles occur when trying to align images using both TailwindCSS and CKEditor 5

My current project involves using Laravel 10 with Vite as the asset builder and Tailwind for CSS. The app.css file contains the following code: @tailwind base; @tailwind components; @tailwind utilities; I am currently implementing a text editing feature u ...

cssckeditortailwind-cssckeditor5laravel-10

Creating a collapsing drop down menu with CSS

I utilized a code snippet that I found on the following website: Modifications were made to the code as shown below: <div class="col-md-12"> ... </div> However, after rearranging the form tag, the drop-down menu collapse ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Is there a hierarchy to be followed within the <head> element?

I have been developing websites using HTML for nearly 3 years now, but since I had to teach myself, there are still a few things I am unsure about. One question that has recently become important is whether it is possible to create groups within the <h ...

javascripthtml

How come the last word in CSS nested flexbox wraps even though there is space available?

I am facing an issue with a nested flex container setup. Below is the code snippet: <div class="parent-container"> <div class="child-container"> <span class="color-block"></span> <span>T ...

htmlcssflexbox

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Desired Outcome for my Javascript: I am working with a div that includes an "onmouseover='getPosition(x)'" attribute which can be dynamically added and removed through my javascript by clicking a specific button. The function 'getPosition() ...

javascriptjqueryhtmlcsstypeerror

Gap in footer spacing on Internet Explorer is significantly large

The layout of the page is split into two main sections: A large header that takes up 100% of the browser height The main content area and footer When viewing the page in a browser, only one of these sections will be visible. The following code works wel ...

jqueryhtmlcssinternet-explorerfooter

Automatically transferring CSS class attributes to a newly created class

The Issue I've encountered a problem while developing a small app for a website. The form in the app requires validation, but conflicts with existing jQuery scripts have been causing errors. These conflicting styles are essential to maintain the desi ...

jqueryhtmlcss