The elements within the divs cannot be aligned next to each other

Question

The elements within the divs cannot be aligned next to each other

Having a bit of trouble positioning two div's side by side. Divs are usually block elements, but this time I'm facing some challenges in getting them to sit next to each other.

Here's the HTML code:

<div class="contact">
    <div class="team" id="staff-1"> 
        <div id="DIV_2">
            <img id="brian" src="../img/brian.png">
        </div>
    </div>
    <div class="team" id="staff-1"> 
        <div id="DIV_2">
            <img id="brian" src="../img/brian.png">
        </div>
    </div>

</div>

I won't be sharing all the CSS here as it's quite lengthy for a SO post. However, you can view it on jsfiddle: http://jsfiddle.net/rynslmns/5pQJ7/

html css position

Answer 1

Answer №1

When creating layouts, you have the choice of using either floating or inline-block elements:

.team {
    float: left;
    width: 33%;
}

OR

.team {
    display: inline-block;
    width: 33%;
}

I personally prefer to use "display: inline-block" because it eliminates the need to clear the floating afterwards.

Answer 2

When creating layouts, you have the choice of using either floating or inline-block elements:

.team {
    float: left;
    width: 33%;
}

OR

.team {
    display: inline-block;
    width: 33%;
}

I personally prefer to use "display: inline-block" because it eliminates the need to clear the floating afterwards.

Answer 3

Answer №2

The identifiers "staff-1", "brian" and "DIV_2" appear more than once, but the DOM id is distinct for each.

Answer 4

The identifiers "staff-1", "brian" and "DIV_2" appear more than once, but the DOM id is distinct for each.

Answer 5

Answer №3

To arrange them side by side, you can easily achieve this with the help of css float property.

.contact {
    overflow: hidden;
}

.team {
    float:left;
}

Take a look at this code snippet for reference:

http://jsfiddle.net/jcfB3/

Please note that there was an issue with repeating IDs in your code which I have fixed to ensure uniqueness. Additionally, when using floats without content inside a container element, it can cause some problems, so I included overflow: hidden as a solution. For further information on this topic, check out http://www.quirksmode.org/css/clearing.html.

Answer 6

To arrange them side by side, you can easily achieve this with the help of css float property.

.contact {
    overflow: hidden;
}

.team {
    float:left;
}

Take a look at this code snippet for reference:

http://jsfiddle.net/jcfB3/

Please note that there was an issue with repeating IDs in your code which I have fixed to ensure uniqueness. Additionally, when using floats without content inside a container element, it can cause some problems, so I included overflow: hidden as a solution. For further information on this topic, check out http://www.quirksmode.org/css/clearing.html.

The elements within the divs cannot be aligned next to each other

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to hide a section of an image using the background of a different div?

Design interactive elements such as buttons and input fields inspired by the layout of Google websites

Merging the link types "icon" and "apple-touch-icon" into one cohesive structure

Is the space-between property not delivering the desired spacing?

Utilizing REACT to dynamically load multiple HTML elements

The alignment of my card icons changes depending on the size of the paragraph

PHP - contact form is live for just 2 hours daily

Is there a way to click on a button and have its background color change randomly each time?

What is the best way to position two divs side by side at the bottom of the

Is it possible in HTML to create an "intelligent" overflow effect where text is truncated and replaced with an ellipsis "..." followed by a link to view the full content?

Transferring hyperlink text to a different page using Express JS

Troubleshooting common issues with PHP's simple HTML DOM parser

The jQuery attr() method is universally compatible across platforms and stands independent

Updating image URL for grouped objects with Fabric JS

The second picture in the slider transitions smoothly into view over the visible area of the first image

What is the most efficient method for identifying and modifying an element's in-line style while performing a swipe gesture?

How to rotate text direction using JavaScript and CSS

Webpage not resizing when WebView orientation changes

Is there a method to modify the arrangement in which 3 specific HTML elements are displayed (i.e., their hierarchy in relation to one another)?

Eliminate the excess space at the bottom of rows in Materialize CSS