css problems and solution to adding to a div

I have a problem im trying to solve with css its best I show you with an image:

My css:

div#test {
width:90%; 
z-index:1; 
padding:27.5px; 
border-top: thin solid #736F6E;
border-bottom: thin solid #736F6E;
color:#ffffff;
margin:0 auto;
}

Im trying to get it to wrap in all broswer types?

The other problem im wondering is if you look at the first image and a cropted image below I would also like to try add an X plus comment and img (hyperlinks) to each div like so:

No sure if thats possible v开发者_StackOverflow中文版ia css?

For your first question, try adding word-wrap: break-word;.

For your second question, you could try using the CSS :after pseudo selector (IE 8+ only) but I think you'd be much better off doing this with JavaScript (i.e. after the DOM loads, iterate over each row and create/append some new tags) - jQuery could make this quite simple.

For the first issue, this should do the trick:

white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
word-wrap: break-word;

The order of those is important, for CSS2/CSS2.1/CSS3 progressive enhancement.

For the second issue, it's possible, sure, but semantically it depends what the image is of. If it's not content-related, then use background-image: url('somepath/someimage.png');. Otherwise use an img tag in the HTML.

First part of your question sounds like you need to use CSS word-wrap:

#test {
    word-wrap: break-word;
}

See https://developer.mozilla.org/En/CSS/Word-wrap for more info.

Also see http://caniuse.com/#search=word-wrap for browser support details (it's pretty much universally supported, so no problems there).

For the second part of the question, you should set the container <div> to position:relative;. Then you can use position:absolute; for the elements within it that you want to be in fixed positions, and position them with top, bottom, left and right as applicable.