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

Is it possible for Penthouse to retrieve critical CSS while using javascript?

Adjust the header and menu color as you scroll

AngularJS: Modify Z-Index on Click Event

The wells are surpassing the line

Inconsistency with Mobile Viewport Problem

Saving Style Sheets in a Database

Apply a specific style conditionally using Angular's ng-repeat directive

Creating a CSS Grid with Scroll Snap functionality to mimic an iPhone screen in HTML

"Enhanced interactivity: Hover effects and selection states on an image map

I am attempting to extract text from an element, but instead of the text, I received a value and am unable to click on it. This particular element is a dropdown button in a Selenium test, with

Enhancing Your Website with Multiple Background Images in CSS3

Executing a function in Angular 2 depending on the class assigned to a <div>

"Exploring the insertion of a line break within the modal body of an Angular application

Display a dynamic variable within React's HTML code

Load the div using ajax upon submitting the form

The HTML required attribute seems to be ineffective when using AJAX for form submission

What steps can I take to get rid of the 'Optimize CSS Delivery' notification on my website?

Issues with table nesting functionality

Trouble displaying image due to issues with javascript, html, Angular, and the IMDb API integration

The issue with HTML where the header and footer elements are continuously repeating when