Place two identical DIVs next to each other on the same line with a gap in between

Question

Place two identical DIVs next to each other on the same line with a gap in between

I'm struggling to place two identical divs side by side on the same row, covering the entire width with some space between them. However, using margin impacts both divs due to their shared class, causing the second div to drop below. I've attempted solutions like overflow:hidden and adjusting size, but nothing works. Adding borders with overflow hidden also doesn't resolve the issue.

The only workaround is to create multiple divs with the same class, despite needing them to span the full width of the row.

Edit: Here's a simplified example of my dilemma:

<div class="container">
    <div class="block">content...</div>
    <div class="block">content...</div>
</div>

<style>
.container{width:1000px; margin:0px auto;}
.block{width:480px;height:500px;float:left;}
</style>

I aim to position the first block followed by a 40px gap, then the second block.

html css width space

Answer 1

Answer №1

To ensure that the two .block divs appear on the same row, it is recommended to use percentages instead of pixels.

Here is an example of how you can achieve this:

Assign an id of 'right' to the div you want on the right, and an id of 'left' to the one you want on the left:

<div class="container">
<div class="block" id="right">content...</div>
<div class="block" id="left">content...</div>
</div>

Then style it with:

<style>
.container{width:1000px; margin:0 auto;}
.block{width:48%;height:500px;display:inline;}
#left{float:left;}
#right{float:right;}
</style>

You can adjust the exact width percentage to fit your design preferences.

Answer 2

To ensure that the two .block divs appear on the same row, it is recommended to use percentages instead of pixels.

Here is an example of how you can achieve this:

Assign an id of 'right' to the div you want on the right, and an id of 'left' to the one you want on the left:

<div class="container">
<div class="block" id="right">content...</div>
<div class="block" id="left">content...</div>
</div>

Then style it with:

<style>
.container{width:1000px; margin:0 auto;}
.block{width:48%;height:500px;display:inline;}
#left{float:left;}
#right{float:right;}
</style>

You can adjust the exact width percentage to fit your design preferences.

Answer 3

Answer №2

If you need to manipulate two elements separately, it's a good idea to assign them distinct class names or ids.

<div class="container">
<div class="block1">content...</div>
<div class="block1">content...</div>
</div>

To display them side by side, you can use inline display property.

.block1, block2 {
display: inline;
}

After that, you have the flexibility to style each element differently by targeting their respective classes.

Answer 4

If you need to manipulate two elements separately, it's a good idea to assign them distinct class names or ids.

<div class="container">
<div class="block1">content...</div>
<div class="block1">content...</div>
</div>

To display them side by side, you can use inline display property.

.block1, block2 {
display: inline;
}

After that, you have the flexibility to style each element differently by targeting their respective classes.

Answer 5

Answer №3

Are you looking for something similar to this?

http://jsfiddle.net/justin_thomas/9S46N/

The CSS:

.myRow {
   width:48em;
}
.myclass {
   padding: 1em;
   margin-left:1em;
   margin-right:1em;
   float: left;
   display:inline;
   width: 20em;
}

The HTML:

<div class="myRow">
  <div class="myClass">Blah... blah...</div> 
  <div class="myClass">Blah... blah...</div> 
</div>

In this setup, I've used floats to achieve the desired layout. However, one downside is that you need to specify the width of the row's container in physical units or one of its parent elements. Additionally, you must know the number of columns in advance to determine the width amount in the class with the divs.

This solution can be cumbersome as you have to ensure that the total width of each div (including margins) does not exceed the width of the row container.

Answer 6

Are you looking for something similar to this?

http://jsfiddle.net/justin_thomas/9S46N/

The CSS:

.myRow {
   width:48em;
}
.myclass {
   padding: 1em;
   margin-left:1em;
   margin-right:1em;
   float: left;
   display:inline;
   width: 20em;
}

The HTML:

<div class="myRow">
  <div class="myClass">Blah... blah...</div> 
  <div class="myClass">Blah... blah...</div> 
</div>

In this setup, I've used floats to achieve the desired layout. However, one downside is that you need to specify the width of the row's container in physical units or one of its parent elements. Additionally, you must know the number of columns in advance to determine the width amount in the class with the divs.

This solution can be cumbersome as you have to ensure that the total width of each div (including margins) does not exceed the width of the row container.

Place two identical DIVs next to each other on the same line with a gap in between

Answer №1

Answer №2

Answer №3

Similar questions

Accessing CSV data stored externally using JavaScript

Conflict between jquery and hoverIntent libraries

Troubleshooting issues with CSS dropdown menu in Internet Explorer and Chrome

"Resolving the issue with unnecessary line breaks in Optimizepress when input is contained within a paragraph

Seeking help with a problem regarding the Tooltip Effect not displaying over a button

What are the reasons and methods for storing multiple images within a single image?

Are CSS3 animations limited to working only with Webkit?

Maintain mouse attention through CSS

Changing the Row's Background Color in Angular When the Button is Clicked

Enable scrolling exclusively for the content within a tab, without affecting the tab label in Clarity Tabs

tips for stopping links from affecting their descendent styles

Block elements such as divs are displayed first before inline elements on a webpage

How to center an item in a Bootstrap navbar without affecting the alignment of other right-aligned items

What methods can I use to prevent multiple calls to isValid in this particular jQuery validation scenario?

Unique rephrased text: "Amongst a backdrop devoid of white,

Immediate family members nearby are not an option. We will have to create the form dynamically

Creating a visual that when clicked, reveals an enlarged version at a different location

Unique ways to serialize an HTML element efficiently: JavaScript tricks

Tips for notifying a user about leaving a page without saving their information

What is preventing my code from being recognized as a valid XML file?