CODEWITHSUNDEEP
htmlcss
deve1
deve1

Reputation: 195

three div in a single row

I want to align the three div in a single row for that i have given the left and center div to float:left property and right div to float right property

but my right div is displayed on the left side of the screen

my code is as follows

<div style="width:100%; height:100%;">
<div align="center" id="left_portion" style="display:none; position:absolute; float:left; width:10%; height:10%;"></div>
<div id="scroller" align="center" style="width:100%; height:100%; overflow:hidden; position:absolute; float:left;">
    <img src="" id="img_main" style="width:100%; height:100%; overflow:hidden;" onClick="scaleImage(event)">
</div>
<div id="right_portion" align="center" style="display:none; float:right; position:absolute;  width:10%; height:10%;"></div>
</div>

i want to use the left and right div as a masking div i.e. when i click on center div second div is going to scale and i want to show the particular portion of the div and rest portion is going to mask from left and right div

Upvotes: 0

Views: 5575

Answers (4)

Ernedar
Ernedar

Reputation: 172

This can be done much simplier with CSS3:

style.css:

div.main_div {
        display: flex;
        justify-content: space-between;
        display: -webkit-flex; /* for Safari */
        -webkit-justify-content: space-between; /* for Safari 6.1+ */ 
    }


div.inside_div_left, .inside_div_center, .inside_div_right {;
    }

index.html:

<div class="main_div">
    <div class="inside_div_left"></div>
    <div class="inside_div_center"></div>
    <div class="inside_div_right"></div>
</div>

This will make inside divs to be in row and responsively change space between them. For more info: http://www.w3schools.com/cssref/css3_pr_justify-content.asp

Upvotes: 0

HR&#211;&#208;&#211;LFR
HR&#211;&#208;&#211;LFR

Reputation: 5982

If you want them displayed in a row, why not use display: inline-block? Here's an example: http://jsfiddle.net/5y2WK/

Upvotes: 1

Vlad
Vlad

Reputation: 1797

Position:Absolute and Float overwrite eachother. You can't have both. Position:Absolute means it will be locked to a position and float means it will adapt automatically, it's impossible to do both at the same time.

<div style="width:100%; height:100%;">
 <div id="left_portion" align="center"  style="float:left; width:10%; height:10%;     background-color:#CCCCCC">

 </div>
 <div id="scroller" align="center" style="width:80%; height:100%; float:left; background-color:#444444">

 </div>
 <div id="right_portion" align="center" style="float:right; width:10%; height:10%; background-color:#CCCCCC">

 </div>
</div>

This works for me at least.

Upvotes: 0

Muhammad Sannan Khalid
Muhammad Sannan Khalid

Reputation: 3137

First Remove the absolute positioning and use floating technique and set the width of 2nd div to 80% not 100% so that there is a space for 1st and 3rd div to load.

<div style="width:100%; height:100%;">
  <div align="center" id="left_portion" style="display:none;  float:left; width:10%; height:10%;">asdasdad</div>
  <div id="scroller" align="center" style="width:80%; height:100%; overflow:hidden; float:left;">   sdfsd
    <img src="" id="img_main" style="width:80%; height:100%; overflow:hidden;" onClick="scaleImage(event)">
  </div>
  <div id="right_portion" align="center" style="display:none; float:right;   width:10%; height:10%;">sdfsdd </div>
</div>

Upvotes: 0

Related Questions