CODEWITHSUNDEEP
csslayouthtml
markzzz
markzzz

Reputation: 48055

How do I create a two column div layout where each column can have variable width

I think the best way is to show us an example :

I'd like to have a div with the user/date info, another div with the text (which should go in a new line if it's longer than the div width) and another div with a link.

How you can see, the first line haven't problem (its correct). The second one, put the div as "block"... seems that float is ignored.

Any helps?

EDIT

Taking the jsfiddler as example, the output should be somethings like this one :

04-03-2011 - userA - Hello My name is John and I really like this website                               X 
02-04-2010 - userA-RealGoodUser -  This text should be at the right of the userA-RealGoodUser, but      X
                                   in fact it doesnt. Why this behaviour?

Upvotes: 1

Views: 469

Answers (2)

SwDevMan81
SwDevMan81

Reputation: 50038

Updated code as well

.wallArea {
    width: 700px;
    float: left;
    margin-left: 5px;
    color: #000000;
    float: left;
}

.wallArea1 {
    width: 670px;
    float: left;
    color: #000000;
    float: left;
    padding-right: 10px;
}

.wallArea2 {
    width: 20px;
    float: left;
    color: #000000;
    float: left;
    padding-top: 2px;
}

.wallUser {
    width: auto;
    float: left;
    font-family: comic sans ms;
    font-style: oblique;
    color: #000000;
    font-size: 11px;
    font-weight: bold;
}

.wallMess {
    width: auto;
    overflow: hidden;
    font-family: comic sans ms;
    color: #000000;
    font-size: 12px;
    font-weight: normal;
}

Update based on example

See it here. I basically allow both columns (user and mess areas) to autosize. This should be what you are looking for.

Upvotes: 1

Brett
Brett

Reputation: 4061

Your containing div, wallArea1 is smaller than the content, wallUser and wallMess therefore wallMess gets pushed to the next line. If you increase the width of wallArea1 and its containing div wallArea this doesn't happen.

Upvotes: 1

Related Questions