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

Question

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?

css html css-position

Answer 1

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 2

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

Answer №2

To position #menu-top on the right side, just include float: right;: http://jsfiddle.net/n5md7/

Answer 4

To position #menu-top on the right side, just include float: right;: http://jsfiddle.net/n5md7/

Answer 5

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 6

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 7

Answer №4

View the code on JSFiddle

#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;
}

Answer 8

View the code on JSFiddle

#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;
}

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

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Display a new view upon clicking a button using AngularJS in a single-page web application

Creating a Jquery method to handle multi-line ellipsis for long text

Can Selenium be used to validate resizing capabilities?

JavaScript Slider for Color Selection

Simplifying the process of implementing Jquery CSS Toggles

Challenges with displaying css/bootstrap classes within angular2

Adjust the size and position of the text input field

Transfer the value of a JavaScript variable to paste it into a fresh tab on Google Chrome

Ensure that col-6 expands to fill the entire row in the event that the other col-6 is hidden on a

Setting button height dynamically in React Native

Error: Code cannot be executed because the variable "sel" has not been defined in the HTML element

How to retrieve the value of an observable from a regular JavaScript array in Knockout JS?

What is the best way to incorporate several php files into a WordPress post?

Choose either nth-child or nth-of-type within a nested element

What is the best way to delete the onclick event of an anchor element?

Is it possible for the relative path of a gif image to become invalid when added to a div?

Removing background color and opacity with JavaScript

JavaScript struggles when dealing with dynamically loaded tables

What are some techniques for highlighting the significance of specific items within an unorganized list?

Developing an if-else statement to showcase a different div depending on the URL