0
Welcome Guest! Login
0 items Join Now

CSS - How to avoid squeezing of column when using percentage

  • CSS - How to avoid squeezing of column when using percentage

    Posted 14 years 1 month ago
    • CSS - How to avoid squeezing of column when using percentage.

      I have the following layout
      #left { float: left; width: 24%; }
      #center { float: left; width: 52%; }
      #right { float: left; width: 24%; }

      The left column contains image.
      The center column holds description.
      The right column mix of image and text.

      My problem when center column has no text the right column squeezes/drifts into center column how to avoid this, I tried adding 'min-width: 52%' to center column it didn't, if I use pixel instead of percentage it works but I don't want to use pixel, any suggestions?
    • VirtueShop
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: CSS - How to avoid squeezing of column when using percentage

    Posted 14 years 1 month ago
    • Hi Peter,

      Have you tried adding !important to the code?

      #center { float: left; width: 52% !important;}

      It might force it in place.

      Regards

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    • cdavis411's Avatar
    • cdavis411
    • Preeminent Rocketeer
    • Posts: 17787
    • Thanks: 882

    Re: CSS - How to avoid squeezing of column when using percentage

    Posted 14 years 1 month ago
    • Hi,

      this works for me in several browsers.
      <style type="text/css">
      #col1
      {
           float: left;
           width: 24%;
           margin-bottom: 10px;
      }
       
      #col2
      {
           float: left;
           width: 48%;
           margin-left: 2%;
           margin-bottom: 10px;
      }
       
      #col3
      {
           float: left;
           width: 24%;
           margin-left: 2%;
           margin-bottom: 10px;
      }
      </style>
       
      <div id="col1">
      Una meravigliosa serenità ha preso possesso della mia anima intera, come questi dolci mattine di primavera che mi godo con tutto il cuore. Sono solo, e sentire il fascino di esistenza in questo luogo, che è stato creato per la felicità delle anime come la mia. Sono così felice, mio caro amico, così assorto nel senso squisito di mera esistenza tranquilla, che io abbandono il mio talento. Dovrei essere in grado di disegnare un colpo solo nel momento presente, eppure sento che non ho mai stato un artista più grande di adesso. Quando, mentre il pullula bella valle con il vapore intorno a me, e il sole meridiano colpisce la superficie superiore della chioma impenetrabile dei miei alberi, e ma brilla few randagio ruba nel santuario interiore, mi butto giù tra l'erba alta da the gocciolando stream, e, come mi sdraio vicino alla terra, un migliaio di piante sconosciute sono accorto da me: quando sento il ronzio del piccolo mondo fra gli steli, e crescere familiarità con le innumerevoli forme indescrivibile degli insetti e mosche, poi sento la presenza dell'Onnipotente, che ci ha plasmato a sua immagine. in excelsis Deo!
      </div>
      <div id="col2">
      Una meravigliosa serenità ha preso possesso della mia anima intera, come questi dolci mattine di primavera che mi godo con tutto il cuore. Sono solo, e sentire il fascino di esistenza in questo luogo, che è stato creato per la felicità delle anime come la mia. Sono così felice, mio caro amico, così assorto nel senso squisito di mera esistenza tranquilla, che io abbandono il mio talento. Dovrei essere in grado di disegnare un colpo solo nel momento presente, eppure sento che non ho mai stato un artista più grande di adesso. Quando, mentre il pullula bella valle con il vapore intorno a me, e il sole meridiano colpisce la superficie superiore della chioma impenetrabile dei miei alberi, e ma brilla few randagio ruba nel santuario interiore, mi butto giù tra l'erba alta da the gocciolando stream, e, come mi sdraio vicino alla terra, un migliaio di piante sconosciute sono accorto da me: quando sento il ronzio del piccolo mondo fra gli steli, e crescere familiarità con le innumerevoli forme indescrivibile degli insetti e mosche, poi sento la presenza dell'Onnipotente, che ci ha plasmato a sua immagine. in excelsis Deo!
      Una meravigliosa serenità ha preso possesso della mia anima intera, come questi dolci mattine di primavera che mi godo con tutto il cuore. Sono solo, e sentire il fascino di esistenza in questo luogo, che è stato creato per la felicità delle anime come la mia. Sono così felice, mio caro amico, così assorto nel senso squisito di mera esistenza tranquilla, che io abbandono il mio talento. Dovrei essere in grado di disegnare un colpo solo nel momento presente, eppure sento che non ho mai stato un artista più grande di adesso. Quando, mentre il pullula bella valle con il vapore intorno a me, e il sole meridiano colpisce la superficie superiore della chioma impenetrabile dei miei alberi, e ma brilla few randagio ruba nel santuario interiore, mi butto giù tra l'erba alta da the gocciolando stream, e, come mi sdraio vicino alla terra, un migliaio di piante sconosciute sono accorto da me: quando sento il ronzio del piccolo mondo fra gli steli, e crescere familiarità con le innumerevoli forme indescrivibile degli insetti e mosche, poi sento la presenza dell'Onnipotente, che ci ha plasmato a sua immagine. in excelsis Deo!
      </div>
      <div id="col3">
      Una meravigliosa serenità ha preso possesso della mia anima intera, come questi dolci mattine di primavera che mi godo con tutto il cuore. Sono solo, e sentire il fascino di esistenza in questo luogo, che è stato creato per la felicità delle anime come la mia. Sono così felice, mio caro amico, così assorto nel senso squisito di mera esistenza tranquilla, che io abbandono il mio talento. Dovrei essere in grado di disegnare un colpo solo nel momento presente, eppure sento che non ho mai stato un artista più grande di adesso. Quando, mentre il pullula bella valle con il vapore intorno a me, e il sole meridiano colpisce la superficie superiore della chioma impenetrabile dei miei alberi, e ma brilla few randagio ruba nel santuario interiore, mi butto giù tra l'erba alta da the gocciolando stream, e, come mi sdraio vicino alla terra, un migliaio di piante sconosciute sono accorto da me: quando sento il ronzio del piccolo mondo fra gli steli, e crescere familiarità con le innumerevoli forme indescrivibile degli insetti e mosche, poi sento la presenza dell'Onnipotente, che ci ha plasmato a sua immagine. in excelsis Deo!
      </div>
  • Re: CSS - How to avoid squeezing of column when using percentage

    Posted 14 years 1 month ago
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: CSS - How to avoid squeezing of column when using percentage

    Posted 14 years 1 month ago
    • should it look like this Peter?

      if so you can try to add this to your css:

      div#product_list {overflow: hidden;}
      div#product_list > div {overflow: hidden;width: 100%;}
      ul.display {width: inherit;}
  • Re: CSS - How to avoid squeezing of column when using percentage

    Posted 14 years 1 month ago
    • Thank you Henning, it works.

      I have two questions, first time have seen div#product_list > div { what does > do.

      Right border has dotted lines, those lines don't show how to fix it.

      Thanks agian, Peter
    • VirtueShop
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: CSS - How to avoid squeezing of column when using percentage

    Posted 14 years 1 month ago
    • div#product_list > div
      <div> with (direct) parent <div id="product_list">

      I use just to take care that it does not take a divs in a deeper nested structure ...
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: CSS - How to avoid squeezing of column when using percentage

    Posted 14 years 1 month ago
    • Now that is a really tough one.
      Couldnt find it cause I got lost in margins and paddings and overflow: hidden.

      So I used the content_blockt-element wich wasn't used here and
      set some values to zero.

      Add this to your css and clear your cache:
      div#product_list ul.display li .content_block {
          overflow: hidden;
          padding: 20px 3px;
          padding-left: 10px;
          border-right: 1px dotted #d3d3d3;
          border-left: 1px dotted #d3d3d3;
      }
       
      div#product_list ul.display li {
          padding: 0;
      }
       
      div.browseParamContainer {
          margin-bottom: 0;
      }

      Hope this helps ...
  • Re: CSS - How to avoid squeezing of column when using percentage

    Posted 14 years 1 month ago
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: CSS - How to avoid squeezing of column when using percentage

    Posted 14 years 1 month ago
    • Peter,

      I learned many things from your posts so it's really a pleasure for me to help you here ...

Time to create page: 0.052 seconds