Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo

CSS problem - not directly Silverstripe


Go to End


5 Posts   8832 Views

Avatar
alingham

Community Member, 4 Posts

1 February 2008 at 9:49am

Edited: 01/02/2008 9:50am

Hi guys
The site we're using is managed by Silverstripe, but this is not necessarily a Silverstripe problem... but I didn't know where else to ask.

I'm trying to add three boxes in 3 columns, each with one news events in it.
I've done the columns by giving each news box an ID

#Homepage-AnchorNews {
	position:absolute;
	padding: 0 0 0 0px;
	width: 175px;
}

#Homepage-TeamNews {
	position:absolute;
	padding: 0 0 0 180px;
	width: 175px;
}

#Homepage-CompanyNews {
	position:absolute;
	padding: 0 0 0 360px;
	width: 175px;
}

This uses padding to position the elements with a 5 pixel gap...
It is also wrapped in a wrapper as follows:

#Homepage-NewsWrapper {
	margin: 0px;
	padding: 0px;
	overflow:auto;
}

The problem is however that this does not display properly as it seems the Content div or layout tag does not fill down the page to incorporate these...

HELP!?

The pages concerned are:
Layout.css
Homepage-News

Avatar
Wojtek

Community Member, 149 Posts

1 February 2008 at 9:55am

You know, position:absolute isn't the best way to do this. You'd better use some floats... I'll post you the solution in a few minutes...

Avatar
Wojtek

Community Member, 149 Posts

1 February 2008 at 10:01am

Edited: 01/02/2008 10:02am

Ok, so what I recommend you, is to do the following:

correct the styles in the following lines (replace the existing CSS declarations):

layout.css (line 274):

#Homepage-AnchorNews {
float:left;
padding:0pt 0pt 0pt 0px;
width:175px;
}

layout.css (line 284):

#Homepage-TeamNews {
float:left;
padding:0pt 0pt 0pt 3px;
width:175px;
}

layout.css (line 294):

#Homepage-CompanyNews {
float:right;
padding:0pt 0pt 0pt 0px;
width:175px;
}

after making these changes, the site should look great =]

Avatar
alingham

Community Member, 4 Posts

1 February 2008 at 3:54pm

THANKS HEAPS!

Couldn't really get my mind around it. Float has done the trick!

I will have to read up on float as I don't really understand what it does, but have seen it used quite a few times.

Thanks for your quick easy and swift response.

Avatar
Wojtek

Community Member, 149 Posts

1 February 2008 at 9:25pm

I recommend you also to use firebug - it's an extremely powerful tool for such things