What is the best way to position divs side by side?

Question

What is the best way to position divs side by side?

I'm having trouble aligning these divs properly. I want them to look like this:

However, they either overlap each other (with .title taking up the full width of the container) or stack on top of each other. Any suggestions?

.wrapper{
    display: table;
    float: left;
    width: 1000px;
    height: 200px;
}
.pic{
    float: left;
    width: 100%;
    height: 20%;
}
.title{
    width: 100%;
    height: 20%;
}
.content{
    width: 100%;
    height: 20%;
}
.footer{
    width: 100%;
    height: 20%;
}

HTML:

<div class="wrapper">
    <div class="pic"><img src="..."></div>
    <div class="title"><p>title</p></div>
    <div class="content"><p>lorem ipsum</p></div>
    <div class="footer"></div>
</div>

Check out the JS FIDDLE here: http://jsfiddle.net/mmb84836/

html css

Answer 1

Answer №1

Following the Recommended Approach:

To organize your layout, place an image in one box and the remaining three boxes on the right within another box using "float:left or **display:inline-block**.

Below is the example code for achieving this structure:

HTML

<div class="wrapper">
    <div class="leftBox">
        <div class="pic">pic</div>
    </div>
    <div class="rightBox">
        <div class="title">title</div>
        <div class="content">content</div>
        <div class="footer">footer</div>
    </div>
</div>

CSS

div {
    border:1px solid #000;
}
.wrapper {
    display: block; /*Default Property - You Can Remove Also*/
    width: 1000px;
    height: 200px;
}
.leftBox {
    float:left;
    width :20%;
    height:100%
}
.rightBox {
    width :79.5%;
    float:left;
     height:100%
}
.pic {
    width: 100%;
    height: 100%;
}
.title {
    width: 100%;
    height: 20%;
}
.content {
    width: 100%;
    height: 20%;
}
.footer {
    width: 100%;
    height: 20%;
}

View the Example Fiddle: http://jsfiddle.net/7xLyc3q1/

Answer 2

Following the Recommended Approach:

To organize your layout, place an image in one box and the remaining three boxes on the right within another box using "float:left or **display:inline-block**.

Below is the example code for achieving this structure:

HTML

<div class="wrapper">
    <div class="leftBox">
        <div class="pic">pic</div>
    </div>
    <div class="rightBox">
        <div class="title">title</div>
        <div class="content">content</div>
        <div class="footer">footer</div>
    </div>
</div>

CSS

div {
    border:1px solid #000;
}
.wrapper {
    display: block; /*Default Property - You Can Remove Also*/
    width: 1000px;
    height: 200px;
}
.leftBox {
    float:left;
    width :20%;
    height:100%
}
.rightBox {
    width :79.5%;
    float:left;
     height:100%
}
.pic {
    width: 100%;
    height: 100%;
}
.title {
    width: 100%;
    height: 20%;
}
.content {
    width: 100%;
    height: 20%;
}
.footer {
    width: 100%;
    height: 20%;
}

View the Example Fiddle: http://jsfiddle.net/7xLyc3q1/

Answer 3

Answer №2

There are numerous responses provided here, yet none truly shed light on the actual situation at hand. When utilizing the float property, it is crucial to grasp the fact that floated elements are essentially removed from the box model and possess a width and height of near zero in relation to other elements. To address this issue, you can employ a workaround by specifying overflow:hidden within the parent element, preventing floated elements from "collapsing".

Take a look at this illustrative example. Observe how the title, content, and footer have a width:100%, filling only the available space allotted for them -- as one would likely anticipate. Also note that floating these elements to the right was unnecessary... they occupy the remaining space naturally.

Answer 4

There are numerous responses provided here, yet none truly shed light on the actual situation at hand. When utilizing the float property, it is crucial to grasp the fact that floated elements are essentially removed from the box model and possess a width and height of near zero in relation to other elements. To address this issue, you can employ a workaround by specifying overflow:hidden within the parent element, preventing floated elements from "collapsing".

Take a look at this illustrative example. Observe how the title, content, and footer have a width:100%, filling only the available space allotted for them -- as one would likely anticipate. Also note that floating these elements to the right was unnecessary... they occupy the remaining space naturally.

Answer 5

Answer №3

To optimize the layout, try applying float: right to classes .title, .content, and .footer.

You may also want to explore utilizing frameworks like Foundation or Twitter Bootstrap. These frameworks offer grid systems to ensure that the divs adjust seamlessly to various screen sizes.

Answer 6

To optimize the layout, try applying float: right to classes .title, .content, and .footer.

You may also want to explore utilizing frameworks like Foundation or Twitter Bootstrap. These frameworks offer grid systems to ensure that the divs adjust seamlessly to various screen sizes.

Answer 7

Answer №4

<div class="container">
<div class="image">image</div>
<div class="details">det1</div>
<div class="details">det2</div>
<div class="details">det3</div>
</div>

.container { width:100px; height:200px; }
.image { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.details { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }

Check out the code on jsfiddle http://jsfiddle.net/a23b45c6/

Answer 8

<div class="container">
<div class="image">image</div>
<div class="details">det1</div>
<div class="details">det2</div>
<div class="details">det3</div>
</div>

.container { width:100px; height:200px; }
.image { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.details { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }

Check out the code on jsfiddle http://jsfiddle.net/a23b45c6/

Answer 9

Answer №5

If you have a specific width for the image, here's one method you can use. I've assumed the image will be 200px wide in this example.

Give this CSS a try:

.wrapper{
    width: 600px;
    height: 200px;
    padding-left: 200px;
    border: 1px dashed gray;
}
.pic{
    float: left;
    width: 190px;
    margin-left: -200px;
    border: 1px dashed blue;
}
.pic img {
    display: block;
}
.title{
    width: auto;
    height: 20%;
    border: 1px dotted blue;
}
.content{
    width: auto;
    height: 20%;
    border: 1px dotted blue;
}
.footer{
    width: auto;
    height: 20%;
    border: 1px dotted blue;
}

The idea is to create space for the image by adding a 200px left padding to the .wrapper.

This padding will push .title, .content, and .footer 200px from the edge of the wrapper.

For .pic, set the width to 200px (or smaller) and apply a -200px left margin to move it into the padded area.

Lastly, ensure the correct width for .wrapper at 600px. The total width of .wrapper should end up at 800px (600px width + 200px left padding).

Check out the demo here: http://jsfiddle.net/audetwebdesign/mgg1stmc/

The key advantage of this method is that you won't need any additional wrapping elements. (Unlike when using floats which require extra wrappers.)

Answer 10

If you have a specific width for the image, here's one method you can use. I've assumed the image will be 200px wide in this example.

Give this CSS a try:

.wrapper{
    width: 600px;
    height: 200px;
    padding-left: 200px;
    border: 1px dashed gray;
}
.pic{
    float: left;
    width: 190px;
    margin-left: -200px;
    border: 1px dashed blue;
}
.pic img {
    display: block;
}
.title{
    width: auto;
    height: 20%;
    border: 1px dotted blue;
}
.content{
    width: auto;
    height: 20%;
    border: 1px dotted blue;
}
.footer{
    width: auto;
    height: 20%;
    border: 1px dotted blue;
}

The idea is to create space for the image by adding a 200px left padding to the .wrapper.

This padding will push .title, .content, and .footer 200px from the edge of the wrapper.

For .pic, set the width to 200px (or smaller) and apply a -200px left margin to move it into the padded area.

Lastly, ensure the correct width for .wrapper at 600px. The total width of .wrapper should end up at 800px (600px width + 200px left padding).

Check out the demo here: http://jsfiddle.net/audetwebdesign/mgg1stmc/

The key advantage of this method is that you won't need any additional wrapping elements. (Unlike when using floats which require extra wrappers.)

Answer 11

Answer №6

If you want to achieve the same result using just CSS and without altering your HTML structure, there is a simpler way:

See it in action http://codepen.io/examplelink/

Here's all you need:

.container {
    display: flex;
    justify-content: space-evenly;
}
.image {
    width: 20%;
}
.text {
    width: 80%;
}

Answer 12

If you want to achieve the same result using just CSS and without altering your HTML structure, there is a simpler way:

See it in action http://codepen.io/examplelink/

Here's all you need:

.container {
    display: flex;
    justify-content: space-evenly;
}
.image {
    width: 20%;
}
.text {
    width: 80%;
}

Answer 13

Answer №7

This code can be utilized to suit your specific design requirements.

View Live Demo

HTML Markup:

<div class="container">
<div class="image"><img src="..."/></div>
<div class="title"><p>Title Here</p></div>
<div class="description"><p>Description Here</p></div>
<div class="footer-section"><p>Footer Section</p></div>
</div>

CSS Styling:

.container{
        position: relative;
        float: left;
        width: 1000px;
        height: 200px;
        border: 1px solid #000000;
    }
    .image{
        float: left;
        width: 300px;
        height: 200px;
        background-color: red;
        position: relative;
    }
    .title{
        width: 650px;
        height: 60px;
        background-color: green;
        position: relative;
        left: 350px;
        top:-16px;
    }
    .description{
        width: 650px;
        height: 60px;
        background-color: blue;
        position: relative;
        left: 350px;
        top: -22px;
    }
    .footer-section{
        width: 650px;
        height: 60px;
        background-color: gold;
        position: relative;
        left: 350px;
        top: -28px;
    }

Output:

Answer 14

This code can be utilized to suit your specific design requirements.

View Live Demo

HTML Markup:

<div class="container">
<div class="image"><img src="..."/></div>
<div class="title"><p>Title Here</p></div>
<div class="description"><p>Description Here</p></div>
<div class="footer-section"><p>Footer Section</p></div>
</div>

CSS Styling:

.container{
        position: relative;
        float: left;
        width: 1000px;
        height: 200px;
        border: 1px solid #000000;
    }
    .image{
        float: left;
        width: 300px;
        height: 200px;
        background-color: red;
        position: relative;
    }
    .title{
        width: 650px;
        height: 60px;
        background-color: green;
        position: relative;
        left: 350px;
        top:-16px;
    }
    .description{
        width: 650px;
        height: 60px;
        background-color: blue;
        position: relative;
        left: 350px;
        top: -22px;
    }
    .footer-section{
        width: 650px;
        height: 60px;
        background-color: gold;
        position: relative;
        left: 350px;
        top: -28px;
    }

Output:

What is the best way to position divs side by side?

Answer №1

Following the Recommended Approach:

HTML

CSS

View the Example Fiddle: http://jsfiddle.net/7xLyc3q1/

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Steps for inserting an image onto a blank page

Generate a PHP array using data from a single column fetched from a MySQL database

What is the method for including line numbers alongside a highlighted code section in highligh.js?

Automatically scroll to the top of a pop-up div that is scrollable with the help of jQuery

Using Javascript to trigger a setTimeout function after the user's mouse leaves

Page title missing from browser tab

Achieve harmony in the If statement by accommodating one condition with multiple values

What is the best way to modify foundation's small, medium, and large breakpoint values?

The percentage of occurrences for each result with the specific id

The loading feature of jQuery UI Autocomplete - .ui-autocomplete-loading is ingenious

modify the designation of a particular element's group

Tips for implementing a hover transition effect in the navigation menu

Positioning the final div at the bottom of a flexbox container

Customize your header and footer for printing to display on each page

How to center align your application in the desktop using Ionic framework

Symfony: The Database Query Button with a Pop-up Feature

How to use an if statement in Django when a button is clicked

What is the best way to transfer files (html, js, css, and resources) while utilizing socket.io?

Navigating a Multi-Page Website with Sleek Scrolling

Create a navigation bar for the homepage with a transparent background, while utilizing a black background for all other views on the website. Utilize