css re-position specific panel elements

camo · October 2011

I want to set my categories box on the left, content center, remaining panel elements right.

I tried: adding to my custom css

#Panel {
   float: right;
}
div.Box.BoxCategories {
   float: left;
}

No change

#Content {
   float: right;
}
#Panel {
   float: left;
}

whole panel now on left, content on right


#Content {
   float: center;
}
#panel { float: right;
}
div.Box.BoxCategories {
   float: left;
}

No change



#Content {
   margin:0px auto;
}
#panel { float: right;
}
div.Box.BoxCategories {
   float: left;
}

no change


#Content {
   width:500px;
	margin:0px auto;
	text-align:left;
}
#panel { float: right;
}
div.Box.BoxCategories {
   float: left;
}

result

UnderDog · October 2011

You or somebody else said I could directly manipulated files in my xamp installation correct?

That's correct. Usually xampp is installed in C:\xampp\
In there is a directory called htdocs in which you can place files ending in .php or .html of course. .php will be run through the xampp program (put simply) and will give you output, just like on a real site.

Back off and give it break, or just help me by NOT helping me anymore, Ive had enough.

Keep in the back of your memory that you got rid of #Content and #Frame so if you get weird layout issues, just remember that you changed that.

Unzip the example you downloaded one more time. If you doubleclick the index.html in your example you will see the 3 column layout the way it should be.

You can "play" with that example by renaming .col1 to .Panel1 .col3 to .Panel2 and .col2 to .Content
Do the same in the stylesheet. It's not the best solution, but it's a start.

sahotataran · October 2011

@camo i gave a thought about it to have layout like

heres what i have - m not sure if it will work

<div id="body" class="clearfix">
<div id="Content"><?php $this->RenderAsset('Content'); ?></div>
<div id="Panel"><?php $this->RenderAsset('Panel'); ?></div>
</div>

the main part will be played by CSS

 #Body {width:960px} 
#Content{width:500px;margin-right:10px; float:left}
#Panel{width:450px;float:right}
#Panel div{width:49%;float:right}
#Panel div.BoxCategories {float:left}

by this code all the divs in #panel will float right and will have width = 195px
but the div.BoxCategories div will float left and have width = 195px

you will have to take care of the widths if you have padding and margins assigned to divs in #Panel

Hope this works for you. do keep me posted if this worked for you or not

sahotataran · October 2011

this is just CSS i dont think it will conflict with any plugins or anything but just with the layout. and you will have to take care on which pages you want to change the layout and stuff like that.
if you are good with CSS you can solve it out in minutes but else it might take a lot to figure out the work arounds

sahotataran · October 2011

Hey @camo can you post an image like how you want to arrange it????

camo · October 2011

@sahotataran Lol, unfortunately no, given I cant get it how I want it, in order to get a such a screenshot, and havent seen another vanilla forum , so fashioned. (and I cannot draw with MsPaint)
But with a little imagination... The list of categorys would be far left, The list of discussions titles (snake plague strikes territory' etc) would be centered, and on the right would be the sign in module, top posters, popular tags etc, whatever you had in panel.

Heres current, imagine everything EXCEPTING the categories list on the right still.

http://www.camosreptiles.com.au/forum/

UnderDog · October 2011

@sahotataran pls see PM
@camo what you're trying to do is a 3 column layout. Left, center, right.

That means that you need a second "panel" div, so you need panel1 and panel2

You have shown that you have tried some things, now show that you can use google.
The search terms are:
3 column layout css fluid
Find the right layout for you and then try to implement that into your theme.

camo · October 2011

So I did. I dowloaded a fluid 3 col layout, here

http://matthewjamestaylor.com/blog/perfect-3-column.htm

It works like this..

So uploaded the css to replace my custom css, then altered my default master.php as follows.

div id Frame, became 'colmask'

div id panel became 'colright'

div id content became 'colmid'

and I created a third div before the footer which I named 'colleft'

What I got was: Panel at 50% width at top
Content at 50% width at bottom
no left div at all.

I also tried them col1, col2, col3 (from css) in various order with same results.

body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:#fff;
	min-width:600px;		/* Minimum width of layout - remove line if not required */
					/* The min-width property does not work in old versions of Internet Explorer */
	font-size:90%;
}
a {
	color:#369;
}
a:hover {
	color:#fff;
	background:#369;
	text-decoration:none;
}
h1, h2, h3 {
	margin:.8em 0 .2em 0;
	padding:0;
}
p {
	margin:.4em 0 .8em 0;
	padding:0;
}
img {
	margin:10px 0 5px;
}
#ads img {
	display:block;
	padding-top:10px;
}

/* Header styles */
#header {
	clear:both;
	float:left;
	width:100%;
}
#header {
	border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
	padding:.4em 15px 0 15px;
	margin:0;
}
#header ul {
	clear:left;
	float:left;
	width:100%;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;
}
#header ul li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
}
#header ul li a {
	display:block;
	float:left;
	margin:0 0 0 1px;
	padding:3px 10px;
	text-align:center;
	background:#eee;
	color:#000;
	text-decoration:none;
	position:relative;
	left:15px;
	line-height:1.3em;
}
#header ul li a:hover {
	background:#369;
	color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
	color:#fff;
	background:#000;
	font-weight:bold;
}
#header ul li a span {
	display:block;
}
/* 'widths' sub menu */
#layoutdims {
	clear:both;
	background:#eee;
	border-top:4px solid #000;
	margin:0;
	padding:6px 15px !important;
	text-align:right;
}
/* column container */
.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;			/* width of page */
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
					only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
}
/* 3 Column settings */
.threecol {
	background:#eee;		/* right column background colour */
}
.threecol .colmid {
	right:25%;			/* width of the right column */
	background:#fff;		/* center column background colour */
}
.threecol .colleft {
	right:50%;			/* width of the middle column */
	background:#f4f4f4;	/* left column background colour */
}
.threecol .col1 {
	width:46%;			/* width of center column content (column width minus padding on either side) */
	left:102%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
	width:21%;			/* Width of left column content (column width minus padding on either side) */
	left:31%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:21%;			/* Width of right column content (column width minus padding on either side) */
	left:85%;			/* Please make note of the brackets here:
					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
	clear:both;
	float:left;
	width:100%;
	border-top:1px solid #000;
}
#footer p {
	padding:10px;
	margin:0;
}

UnderDog · October 2011

And then you forgot to make a screenshot, deleted everything and all is back to the way it was at your site at the moment?
I'm just wondering which part of the example you forgot to CTRL-C and CTRL-V

camo · October 2011

I remind you its a live site, not a localhost testing installation, I cant afford to mess about with it much.
You or somebody else said I could directly manipulated files in my xamp installation correct?

Ill try again there, and post you a pretty picture ok. Your sarcasm is still quite transparent. Im making the effort you've been hounding me about and your still at it.
Back off and give it break, or just help me by NOT helping me anymore, Ive had enough.

Ah screw it, Ill create a panel two as you suggested, fill it with 'BoxCategories' and write css accordingly.

camo · October 2011

Well that didnt work out LOL

<div id="Panel2">
<div class="Box BoxCategories"></div>
</div>


#Panel2 {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

I think ill leave it for now. I know how to swap to put the panel on the left.

UnderDog · October 2011

You or somebody else said I could directly manipulated files in my xamp installation correct?

That's correct. Usually xampp is installed in C:\xampp\
In there is a directory called htdocs in which you can place files ending in .php or .html of course. .php will be run through the xampp program (put simply) and will give you output, just like on a real site.

Back off and give it break, or just help me by NOT helping me anymore, Ive had enough.

Keep in the back of your memory that you got rid of #Content and #Frame so if you get weird layout issues, just remember that you changed that.

Unzip the example you downloaded one more time. If you doubleclick the index.html in your example you will see the 3 column layout the way it should be.

You can "play" with that example by renaming .col1 to .Panel1 .col3 to .Panel2 and .col2 to .Content
Do the same in the stylesheet. It's not the best solution, but it's a start.

camo · October 2011

Thankyou @Underdog, Ill try this on my localhost Tomorrow, and If i can get it right ill give it a go on my live site. I never thought of reversing names like that, great idea. You've been helpful,
cheers.

sahotataran · October 2011

i think its going to be a hard job because in our theme we define

< div id="Body" class="clearfix" >
< div id="Content"><?php $this->RenderAsset('Content'); ?>< /div>
< div id="Panel"><?php $this->RenderAsset('Panel'); ?>< /div>
< /div>

so is there a way @underdog that we can have something like

< div id="Body" class="clearfix" >
< div id="Content"><?php $this->RenderAsset('Content'); ?>< /div>
< div id="Panel1"><?php $this->RenderAsset('Panel1'); ?>< /div>
< div id="Panel2"><?php $this->RenderAsset('Panel2'); ?>< /div>
< /div>

and from the dashboard settings we can select the plugin (e.g who's online) to go to Panel1 or Panel2?

camo · October 2011

Im guessing you would then need to create code/module called panel2 ?

Ive given up on idea myself, it would be neat if future versions allowed for custom
placing of modules (something like 'pockets') and creation of new ones. You could then really customise your vanilla installation.

sahotataran · October 2011

@camo i gave a thought about it to have layout like

heres what i have - m not sure if it will work

<div id="body" class="clearfix">
<div id="Content"><?php $this->RenderAsset('Content'); ?></div>
<div id="Panel"><?php $this->RenderAsset('Panel'); ?></div>
</div>

the main part will be played by CSS

 #Body {width:960px} 
#Content{width:500px;margin-right:10px; float:left}
#Panel{width:450px;float:right}
#Panel div{width:49%;float:right}
#Panel div.BoxCategories {float:left}

by this code all the divs in #panel will float right and will have width = 195px
but the div.BoxCategories div will float left and have width = 195px

you will have to take care of the widths if you have padding and margins assigned to divs in #Panel

Hope this works for you. do keep me posted if this worked for you or not

camo · October 2011

Thankyou so much, im very busy right now so havent had time to test anything on my localhost yet, but when time permits ill try that!

p.s do you think that would cause conflict with core files looking for the original elements? Or plugins for that matter?

sahotataran · October 2011

this is just CSS i dont think it will conflict with any plugins or anything but just with the layout. and you will have to take care on which pages you want to change the layout and stuff like that.
if you are good with CSS you can solve it out in minutes but else it might take a lot to figure out the work arounds

camo · October 2011

Ok, thanks again, im going to mess with my localhost installation, that way no harm comes if I destroy it, lol

sahotataran · October 2011

you got the Secret Buddy lol

walshmagger · September 2015

More abut.....CSS Positioning

Walsh

css re-position specific panel elements

Best Answers

Answers