challenges with positioning div elements using relative CSS styling

Question

challenges with positioning div elements using relative CSS styling

This is a section of my code:

CSS :

.body .left, .right {
       position:relative;
       z-index:6;
       display:inline-block;
}
.body .left {
       top:0;
       left:0;
       width:100px;
       height:300px;
       margin-right:10px;
       border:1px solid #333;
}
.body .right {
       top:0;
       width:100px;
       height:300px;
       border:1px solid #333;
}

And HTML

<div class="body">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>

I would like the top:0; property to be on one line when there is no content added to either .left or .right div. It works fine in that scenario, but when text or something else is added to either .left or .right div, the divs are arranged differently. Please check out the example on JsFiddle to see what I mean.

View Example : JsFiddle

html css

Answer 1

Answer №1

If you replace your .body .left, .right with display: inline-block with float: left, everything will function as desired. Check out this example for reference: http://jsfiddle.net/Zct6S/10/

I also eliminated the need for position: relative since it is not necessary when using float.

Answer 2

If you replace your .body .left, .right with display: inline-block with float: left, everything will function as desired. Check out this example for reference: http://jsfiddle.net/Zct6S/10/

I also eliminated the need for position: relative since it is not necessary when using float.

Answer 3

Answer №2

.main .left, .main .right {
    display:inline-block;
    vertical-align: top;
}

Specify the vertical alignment for the inline blocks;

Check out this example

.main .left, .main .right {
    display:inline-block;
    vertical-align: top;
    width:100px;
    height:300px;
    border:1px solid #333;
}
.main .left {
       margin-right:10px;
}
.main .right {}

If you need compatibility with IE6/7, add this:

.main .left, .main .right {
   display: inline !ie7;
}

The !ie7 is a workaround, if you prefer not to use it - ensure those 2 classes have display: inline through a conditional comment .. whichever suits your needs ;)

HTML:

<div class="main">
    <div class="left">
        text
    </div>
    <div class="right">
    </div>
</div>

Answer 4

.main .left, .main .right {
    display:inline-block;
    vertical-align: top;
}

Specify the vertical alignment for the inline blocks;

Check out this example

.main .left, .main .right {
    display:inline-block;
    vertical-align: top;
    width:100px;
    height:300px;
    border:1px solid #333;
}
.main .left {
       margin-right:10px;
}
.main .right {}

If you need compatibility with IE6/7, add this:

.main .left, .main .right {
   display: inline !ie7;
}

The !ie7 is a workaround, if you prefer not to use it - ensure those 2 classes have display: inline through a conditional comment .. whichever suits your needs ;)

HTML:

<div class="main">
    <div class="left">
        text
    </div>
    <div class="right">
    </div>
</div>

challenges with positioning div elements using relative CSS styling

Answer №1

Answer №2

Check out this example

Similar questions

What is the best way to position this span on the right side of the div?

Ways to eliminate HTML elements from one HTML content to another

Enable Component to Exceed to the Following Line

How can I update the color scheme in styled components based on the active state of the component?

Mobile Windows Z-Index

What is the best way to choose a date and time in a custom format within my React application?

ExtJS web displays appear differently when viewed on Chrome's toggle device mode versus a mobile browser

Exploring Javascript parameters with the power of jquery

Code to select the first row in a table using CSS styling

I would like to add an underline below the title

The pre-loader is hidden behind the block content and navigation bar

Is there a way to assign a unique scrollTop value for a specific scrollspy location?

Discrepancy found in C# Webbrowser control: the displayed content does not match the Document.inner

Interested in extracting an HTML table from a Form element within a Python Flask application?

Error loading .OBJ files in Three.js on Azure, but works fine locally

Creating a persistent table header and first column in HTML tables

Make sure the inputs in separate table data cells are lined up in

What is the method for modifying the appearance of the background property on an input element?

Tips on adjusting the width of a div container based on the size of an

Errors that occur when parsing templates in Angular 2