Positioning Issue with Google Calendar Feed

HTML & CSS
1

I have a homepage with two large blocks across the bottom of the page. See here. They are created as one large <div class=“twoarcs”> with 2 inner divs that each contain the same semi-transparent “blue arc” bg img. And I’ve suceeded in positioning a Jquery Nivo img slider in the left blue arc. The right arc img was still in its correct place at that point

But then, when I scripted a google calendar feed to place inside the right arc, it knocked it out of place down about 40 px. This is weird because the parent “twoarcs” has just the right height to contain the 2 arc imgs next to each other.

I’m just trying to align both bg arc imgs next to each other and then position the calndar feed correctly, like I was able to do with the img slider.

Don’t understand why that rightarc is knocked down vertically.

Thanks in advance for your help.

2

Hi,

The top margin on the h1 in that right box collapses and becomes the parents top margin and moves it down 10px. Remove the top margin and use padding instead if you want some space there.


.rightarc h1{margin-top:0;padding:40px 0 0}
3

Thanks! But now how do I get the text portion to move to the right??

I’ve tried …

.rightarcfeed{
margin-left:25px;
left:40px;
padding-left:50px;
}

and none of them seem to be working

4

Hi,

You really should have floated those elements as position:relative wasn’t really built for moving things around like that.

Anyway you should be able to add padding but I would move the element up with a negative margin instead otherwise you will get a great big hole in the page in some browsers.


.rightarc {
  background: url("../images/one_big_arc.png") no-repeat scroll 0 0 transparent;
  height: 292px;
[B]  margin-top: -292px;[/B]
 [B] padding: 0 0 0 30px;[/B]
  position: relative;
[B]  top: 0;[/B]
[B]  width: 360px;[/B]
}
5

That worked great!

I find it strange that I was able to move the text block with the parent div which contained the arc. So I may not have even needed the rightarcfeed div when I could just have styled

.rightarc h1, p, a etc …

But this gives me good insight moving forward.

6

You have no styles applied to rightarcfeed so it is jujst a div inside a div and is therfore a wasted element as it provides no sematics and no structure and is not really needed.

Sometimes its easier to add an inner div if you want to move all the inner content in one go but you can just as easily move the individual items and save a div unless there are lost of elements to be moved.

7