[Solved]CSS issues...

[acheronx]

Alright, I've been fighting with this little problem for the past few hours, and finally am going to ask for a little advice.

My goal is to have a <div> and inside that div, contain 3 more divs (left, center, right) Using 30%,40%,30% respectively.

The issue, the right div keeps getting put onto another line.

The CSS I will post has been heavily modified to try and get it working, so it may look messy, but didn't start out that way.

The HTML:

Code: Select all

		<div id='maingame'>
			<div id='infobox'>
				<div class='charbox'>char</div>
				<div class='displaybox'>display</div>
				<div class='actionbox'>action</div>
			</div>
			<br /><br />
			<div id='chatbox'>CHAT</div>
		</div>

And the CSS:

Code: Select all

#infobox
{
	width: 100%;
	height: 50%;
	display: inline-block;
}

.charbox
{
	float: left;
	width: 29%;
	height: 100%;
	background-color: #555555;
}

.actionbox
{
	float: right;
	width: 29%;
	height: 100%;
	background-color: #555555;
}

.displaybox
{
	width: 40%;
	height: 100%;
	margin: auto;
	background-color: #555555;
}

I've tried everything from inline-block, clear:both, etc... and none of it has worked. But I may have been putting it in the wrong place.

So, anyone have any suggestions/advice on how I could get this to work?

Thanks.

[Jackolantern]

Set all of the floats to LEFT. It seems counter-intuitive, but all of the floats need to match as the same value to make them all side-by-side.

[acheronx]

Simplest answer is the most logical, I guess.

That did the trick, with some extra modifying.

Here is the final CSS in case anyone else needs it:

Code: Select all

#infobox
{
	width: 100%;
	height: 50%;
	overflow: auto;
	border: 1px solid;
}

.charbox
{
	float: left;
	width: 30%;
	height: 100%;
	overflow:hidden;
	background-color: #555666;
}

.actionbox
{
	float: left;
	width: 30%;
	height: 100%;
	background-color: #555555;
}

.displaybox
{
	float: left;
	width: 40%;
	height: 100%;
	background-color: #555777;
}

[Jackolantern]

Awesome! Glad it worked out

And yeah, I knew it would take some more work because I actually ran the code. I just didn't bother with the squished-together issue since I didn't know the specific look you were going for!

If that answer was sufficient, can you add [Solved] to the thread title by editing the first post? Thank you!