html - Left and right Divs in CSS -
i want left div box, , right div box. right div shoulld 300px wide , show right beside left div.
i awful css, , despite trying solutions 5 other stack overflow questions similer one, im still not able figure out.
i have tried display: inline; have tried tables/table cells. have tried fixed , auto margins have tried padding. have searched last hour , continued tinker.
i @ wits end stupid language , need help.
i have news feed on homepage, want 300px box on right of main article show news. have boiled down simple possible components test solutions, , none of them appear work @ all.
my style.css:
#left { float: left; margin-right: 400px; } #right { float: right; width: 298px; } my html file:
<div id="right"> latest news </div> <div id="left"> <p>my problem comes when p tag gets long. ok when short, regardless of wrapping, gets screwed second long , driving me bonkers.</p> </div>
you can keep #left block element regular inflow content, not floated.
the right margin provide space news feed on right grow needed.
#left { margin-right: 320px; border: 1px dotted gray; } #right { float: right; width: 298px; border: 1px dotted gray; }<div id="right"> <h2>latest news - news feed.</h2> <ul> <li>news topic ...</li> <li>news topic ...</li> <li>news topic ...</li> <li>news topic ...</li> <li>news topic ...</li> <li>news topic ...</li> <li>news topic ...</li> <li>news topic ...</li> <li>news topic ...</li> </ul> </div> <div id="left"> <p>my problem comes when p tag gets long. ok when short, regardless of wrapping, gets screwed second long , driving me bonkers.</p> <p>my problem comes when p tag gets long. ok when short, regardless of wrapping, gets screwed second long , driving me bonkers.</p> <p>my problem comes when p tag gets long. ok when short, regardless of wrapping, gets screwed second long , driving me bonkers.</p> <p>my problem comes when p tag gets long. ok when short, regardless of wrapping, gets screwed second long , driving me bonkers.</p> <p>my problem comes when p tag gets long. ok when short, regardless of wrapping, gets screwed second long , driving me bonkers.</p> <p>my problem comes when p tag gets long. ok when short, regardless of wrapping, gets screwed second long , driving me bonkers.</p> <p>my problem comes when p tag gets long. ok when short, regardless of wrapping, gets screwed second long , driving me bonkers.</p> <p>my problem comes when p tag gets long. ok when short, regardless of wrapping, gets screwed second long , driving me bonkers.</p> <p>my problem comes when p tag gets long. ok when short, regardless of wrapping, gets screwed second long , driving me bonkers.</p> </div>