13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

How to add two column div in CSS template

by biznics
10 replies
  • WEB DESIGN
    • |
Hi all,

Got a simple question about CSS.

I already have a CSS coded template but I need to tweak it a little by adding a box. What I need to know is, how can I add a two-row div (without using tables) in CSS?

I've also added an attachment to make my question clear.


Thanks,
#add #column #css #div #template
  • Profile picture of the author Jonas B
    float 2 divs en set the width of both to 50%
    and then float the content underneath also or clearfix the box above because else it will mess up
    Signature
    Proud owner of the most flexible mobile app builder. Check it out at http://bit.ly/hybrica!
    Mobile Web Expert & Android Developer
    {{ DiscussionBoard.errors[5001172].message }}
    • Profile picture of the author biznics
      Originally Posted by Jonas B View Post

      float 2 divs en set the width of both to 50%
      and then float the content underneath also or clearfix the box above because else it will mess up
      Thanks for the help mate.

      But I forgot to mention that I have no knowledge of CSS/Div coding. So if you can, I would appreciate an exact code with proper placement (if it is of no bother).


      Regards,
      {{ DiscussionBoard.errors[5001574].message }}
  • Profile picture of the author Michael71
    Without seeing your existing website/css it's not possible to tell you where to place the html to add those columns.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[5001598].message }}
    • Profile picture of the author biznics
      Originally Posted by Michael71 View Post

      Without seeing your existing website/css it's not possible to tell you where to place the html to add those columns.
      Hi,

      I have attached a jpeg file where you can get the idea of what I need exactly.

      Now I am not a CSS guy but I do know how to copy/paste and place CSS/divs and codes in templates.

      I've digged it a little but but what I come up with is, that there would be a div added in html page and div-id in CSS. The whole thing will consist few lines I am sure, nothing too complicated or technical; at least not for pros.

      Hope you get the picture.
      {{ DiscussionBoard.errors[5002003].message }}
  • Profile picture of the author Michael71
    Code:
    .yourcolumn1 {
width:49%;
float:left;
}
.yourcolumn2 {
width:49%;
float:right;
}
    Code:
    <div class="yourcolumn1">your text for column1</div>
<div class="yourcolumn2">your text for column2</div>
<div style="clear:both;"></div>
    Basically it goes like the code above.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[5002101].message }}
    • Profile picture of the author biznics
      Originally Posted by Michael71 View Post

      Code:
      .yourcolumn1 {
width:49%;
float:left;
}
.yourcolumn2 {
width:49%;
float:right;
}
      Code:
      <div class="yourcolumn1">your text for column1</div>
<div class="yourcolumn2">your text for column2</div>
<div style="clear:both;"></div>
      Basically it goes like the code above.
      Thanks Michael, that was a big help. I really appreciate it.

      Just one more thing. Now I need to have multiple rows, should I copy/paste the same divs in HTML page or is there any other way of adding rows?

      Many thanks,
      {{ DiscussionBoard.errors[5005157].message }}
    • Profile picture of the author rfmintour
      Originally Posted by Michael71 View Post

      Code:
      .yourcolumn1 {
width:49%;
float:left;
}
.yourcolumn2 {
width:49%;
float:right;
}
      Code:
      <div class="yourcolumn1">your text for column1</div>
<div class="yourcolumn2">your text for column2</div>
<div style="clear:both;"></div>
      Basically it goes like the code above.
      Thank. I done it success.
      {{ DiscussionBoard.errors[5005204].message }}
  • Profile picture of the author Jonas B
    Didn't know that.. but like michael posted the code above it should be.. i prefer floating to left and if you set the width to 50% instead of 49 then you also have to set the border: none;
    Signature
    Proud owner of the most flexible mobile app builder. Check it out at http://bit.ly/hybrica!
    Mobile Web Expert & Android Developer
    {{ DiscussionBoard.errors[5002157].message }}
    • Profile picture of the author Michael71
      Originally Posted by Jonas B View Post

      Didn't know that.. but like michael posted the code above it should be.. i prefer floating to left and if you set the width to 50% instead of 49 then you also have to set the border: none;
      I do not know his other CSS so I only told him the basics
      Signature

      HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
      ---
      Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

      {{ DiscussionBoard.errors[5002756].message }}
  • Profile picture of the author Michael71
    copy/paste the same divs.

    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[5005240].message }}

Trending Topics