Click here to Skip to main content
14,640,669 members
Rate this:
Please Sign up or sign in to vote.
See more:
Okay, so this is slightly confusing so bear with me. I'm trying to create a page with a side bar and some main content, as well as a title bar up at the top. The title bar is in place and works, so I'm not too concern about it. But although I've gotten the panel and content to finally stack horizontally, whenever the page resizes or I zoom in, the content gets pushed to below the panel, despite them both being in a container that should at least clip the content (the content runs over the background color of its container). Anyway, here is my CSS and the implementation of it:

#links		{ width:420px; background:#2583FE; float:left; border:1px solid #0961D3; border-left:0px solid black; height:100%;} /*This is the panel*/
#cont       { background:#F2F5A9; width:100%; float:left;  height:100%;} /*This is the content*/
#main       { overflow:auto; margin-left:400px; float:left; width:900px; padding-left:10px; margin:0 auto; }/*This is the parent container*/


<div id="cont">

	<div id="links">
		<!--All my panel stuff-->
	</div>
		
	<div id="main">
		<!--A table with some values-->
		<table width="100%">
			<tr>
				<td>Item 1</td>
				<td>Item 2</td>
				<td>Item 3</td>
			</tr>
		</table>
	</div>
</div>


Does anyone know what I'm doing wrong? I would like the table (and the rest of the content) to stay stationary instead of repositioning itself and defaulting to a vertical div stack. I'm not sure what's causing it. Hopefully this all makes sense. Any help is appreciated. Thanks in advance.

There's an image of the problem: Here
Posted
Rate this:
Please Sign up or sign in to vote.

Solution 1

If you use Width and Height in px it'll not wrap-contents of div.

here is some helping links. try these.

Content-Wrap

Content-Wrap-Example

Don't wrape content of div

Word wrap text in div
   
Comments
RadXPictures 27-Jun-13 17:15pm
   
Omg thank you! I had never heard of white-space before (third link) and after placing that in html {} brackets, it works! Thanks!
Rate this:
Please Sign up or sign in to vote.

Solution 2

we can arrange two divs side by side....

left


right


hope it will help u...
   
Comments
RadXPictures 27-Jun-13 17:03pm
   
Umm.. those two lines just appeared vertically..

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100