1

I have 3 divs in total. One is a container for the other left and right divs. There will be so many containers. Everything is okay now, but when the window is resized the CSS should avoid overlapping the divs. Instead, it should wrap to the next line. Please provide me your suggestion. Below is my code.

Css Code

.divmain
{
width: 100%;
padding: 15px;
height: auto;
}

.divmain .divleft
{
float: left;
width: 16%;

}

.divmain .divright
{

float: left;
width: 84%;
}

View Code

<div style="width: 100%;">
 <div class="divmain">
   <div class="divleft">
    <label class="label">Date</label>
   </div>
   <div class="divright">
    <input type="text"/>
   </div>
 </div>
 <div class="divmain">
   <div class="divleft">
    <label class="label">Status</label><span class="mand">*</span>
   </div>
   <div class="divright">
    <label class="label">Pending</label>
   </div>
 </div>
 <div class="divmain">
   <div class="divleft">
    <label class="label">Reference No</label>
   </div>
   <div class="divright">
    <input type="text"/>
   </div>
 </div>
</div>

Demo

Matt Kantor
  • 1,704
  • 1
  • 19
  • 37
UniqueChar
  • 195
  • 2
  • 2
  • 13
  • 7
    [Every time somebody uses `!important` the next person who has to maintain the code or change the style at some time kills a kitten.](http://i.stack.imgur.com/2usfA.png) – PeeHaa May 18 '13 at 14:36
  • What I am trying to say with above is the when you are using `!important` you are shooting yourself in the foot. Because you are going to have a hard time making changes to the thing without resorting to even uglier stuff. – PeeHaa May 18 '13 at 14:39
  • @PeeHaa. I have removed or edited from the original post. – UniqueChar May 18 '13 at 14:42
  • On a ever more constructive note. Also see this nice post about using `!important` for extra info: http://stackoverflow.com/questions/13743671/is-important-bad-for-performance/13745254#13745254 – PeeHaa May 18 '13 at 14:44
  • 1
    What do you mean when you say: "There will be so many containers." Does this mean that `.divmain` will have more than two floated child elements? and what determines the width of the child elements? – Marc Audet May 18 '13 at 16:04
  • 1
    @MarcAudet. Single **.divmain** will have one divleft and one divright. Actually i was trying to use it forms. I have so many forms with different sized input names. So i have to use this css code for standardization. divmain is the container for both divleft and divright. The divright should be placed after the divleft with some space. see my update for better understanding my scenario. – UniqueChar May 18 '13 at 16:24
  • @UniqueChar But you want all of those on one row together? Or you want them to be one label and one input per line? – Trolleymusic May 18 '13 at 16:46
  • @Trolleymusic. I want one label and one Input per line. – UniqueChar May 18 '13 at 17:17
  • What don't you like about your current demo? it could be okay except if you shrink the window down to a small size. I don't see a problem at the moment. – Marc Audet May 18 '13 at 17:40
  • I'm not sure exactly what you want it to look like, could you include a diagram or something? Your jsFiddle demo does wrap label text onto new lines when necessary. – Matt Kantor May 18 '13 at 17:59
  • When the window resizes, the divright overlaps the divleft that i do not wanted. The divleft and divright should always stay with their position even when window resized except can wrap the left label content to the next line. – UniqueChar May 18 '13 at 18:12

0 Answers0