I am going through this book Visual Quickstart Guide HTML, XHTML & CSS. I am now on the working with styles chapter. They are talking about setting width for an element and setting margins for an element. All I am trying to do is place a paragraph about 100 px from the left edge of my browser. Did it. No problem. Now I am trying to get the right side of the paragraph to end each sentence and wrap (or return) to the next line below it at a set distance or percentage away from the right side of the browser. Right now the text continues all the way to the edge of right side of the browser. Does anyone have any simple example code to illustrate how this is done? Thanks for any help.
Try using padding-right:100px (or whatever amount gives the desired effect) as a CSS property for the containing element you've got your text within. This creates the "white space" between the edge of the element and the content on the right side. i.e. if you're just containing it within your body tags, not a separate div tag: body { padding-right:100px; } Code (markup): Good luck! --Ben
Thanks. I put your padding in there and it seems to wrap the text however the text now goes to the second line down all the way to the left edge of the browser ignoring the 110 px empty space on the left. The wrapped text also touches the earlier part of the sentence just above it. Sorry to bother you for more help if your available thanks.
Disregard last question. I figured out a solution by using div positioning my text in relation to this and positioning this div in relation to the edges of my web browser.
Do not use positioning attributes until you have learnt to place DIV's otherwise, this way you gain a better grasp on how to obtain your desired layouts correctly. Because positioning often has problems displaying how you want it in every browser. Therefore it's best to leave positioning, oh by the way i mean meaning the position: attribute only if this is what you were doing because this should only be used in rare circumstances. Margins add gaps to the outside of an element, padding adds gaps inside the element and a border would go inbetween any padding and margin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> /* My body */ body { } /* Container */ #Container { width:35%; margin-left:100px; } </style> </head> <body><!-- The Start of the Markup --> <div id="Container"> <p>Ut aliquam convallis felis. Vestibulum vitae arcu. In lacinia. Suspendisse lobortis vulputate neque. Phasellus pede arcu, tincidunt nec, ullamcorper et, bibendum sit amet, sapien. Nam cursus? Proin fermentum vulputate turpis! Quisque sit amet dolor. Vivamus id nibh. Aenean eget ligula vel urna fermentum ultricies. Nullam et dolor. Sed ac purus? Aenean enim! Nulla facilisi. </p> <p>Ut aliquam convallis felis. Vestibulum vitae arcu. In lacinia. Suspendisse lobortis vulputate neque. Phasellus pede arcu, tincidunt nec, ullamcorper et, bibendum sit amet, sapien. Nam cursus? Proin fermentum vulputate turpis! Quisque sit amet dolor. Vivamus id nibh. Aenean eget ligula vel urna fermentum ultricies. Nullam et dolor. Sed ac purus? Aenean enim! Nulla facilisi. </p> </div> </body> </html> HTML: Put a container around your paragraphs and set it to a small width and it will make the text be about 100px; to the left