Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 89
  • Last Modified:

how to style a 2-column?

Hi,
Please see the attached jpg file.  The small div on the left is a fixed size image, 42X40,.  the larger div on the right will contain text that could grow longer if needed.  the space between the 2 div area will be 10px.

I tried putting a outer div to enclose these 2 div but still doesn't work right.  Appreciate some help here.   Because it's Intranet, I'm not able to provide url here.
style.jpg
0
lapucca
Asked:
lapucca
  • 2
  • 2
1 Solution
 
GaryCommented:
http://jsfiddle.net/mae9s6km/1/

<div>
    <div style="width:42px;height:40px;margin-right:10px"></div>
    <div>Lorem ipsum
        <br>Lorem ipsum
        <br>Lorem ipsum
    </div>
</div>

Open in new window


div {
    clear:both
}
div div {
    float:left;
    clear:none;
    border:1px solid gray;
}

Open in new window

0
 
lapuccaAuthor Commented:
Hi, I don't need borders.  The box is intended to show as div area.  What is your 2nd example code for?

I currently uses the same as your 1st example.  However, I have style sheet classes as follow.
.evnts-image {
    width:42px;
    margin-right: 10px; float: left;
}
.events-text {
    margin-left:52px;
    float:right;

}


         <div>
            <div class="evnts-image">
               <img src="/PublishingImages/Portal/Calendar%20icons/img1.png" alt=""/>
            </div>
            <div class="events-text">
               <strong>This is a title</strong><br/> Some text about this event that should be able to grow. </div>
         </div>
0
 
GaryCommented:
The border is so you can see the divs.
There is only one code sample - the HTML and the CSS - look at the fiddle
0
 
lapuccaAuthor Commented:
Very cool.  Thank you.
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now