CODEWITHSUNDEEP
css
Dynamikus
Dynamikus

Reputation: 2958

How can I achieve this layout css

Hi there I know that is a silly question but I couldn't find a solution for this case, my css skills are not good :(.

How can I achieve the layout below. The text should wrap at the end of the container(div,span,whatever)

 ---- --------------------------
|URL:|thissdfsisalongurasdsdfrea|
 ----|allyyyyyyyyyyylonggggggggg|  
     |sdddfasdfsdfasdfsadfsdfsds|
     |--------------------------|

Upvotes: 1

Views: 91

Answers (5)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

Hi i m created this like one.

Css

.url {
    float: left;
    width: 75px;
    background:pink;
}

.description{
    float: left;
    width: 175px;
    word-wrap: break-word;
    text-align:justify;
    background:lightgreen;
}​

HTML

<div class="url">URL:</div>

<div class="description">thissdfsisalongurasdsdfreaallyyyyyyyyyyylongggggggggsdddfasdfsdfasdfsadfsdfsds</div>​

Live demo Click here http://jsfiddle.net/rohitazad/tmqCR/25/

Upvotes: 0

Isaac Fife
Isaac Fife

Reputation: 1689

http://jsfiddle.net/tmqCR/

A few of these responses have what you need. I think this has everything together though.

Upvotes: 2

mikevoermans
mikevoermans

Reputation: 4007

The media element. Really breaks down to float: left; on the first element and overflow hidden on the second.

Upvotes: 0

Ibu
Ibu

Reputation: 43810

The HTML:

<div class="container">
   <div class="url">
     URL:
   </div>
   <div class="text">
   Lorem Ipsum dolor
   Lorem Ipsum dolor
   Lorem Ipsum dolor
   Lorem Ipsum dolor
   </div>
   <div class="clear"></div>
</div>

The CSS:

.url {
  float:left;
  width:60px;
}
.text {
  float:left;
  width:200px;
}
.clear {
   clear:both;
}

Upvotes: 2

msponagle
msponagle

Reputation: 326

Check out this fiddle http://jsfiddle.net/FEZaJ/

The URL - Float it left;

Upvotes: 1

Related Questions