image positioning

[shannoroo]

Hi All,

I am just learning CSS and (probably unsurprisingly) am having the most trouble with general layout/positioning.

Right now, I am trying to get an image centered on the page, and then another element to the right of the image, with a bit of space in between (my twitter feed that I imported using the twitter widget).

I have the image and twitter each in a div, and then those two wrapped in a div…and am playing with the {display} property…but I just can’t get it right…..

So my html is basically:

caption text

And my css (well, it’s a bit messed up as I’ve been trying all kinds of things):
.frontpage {
width:60%;
margin:0 auto;
}

.image3 {
display: inline-block;
width:518px;
height:421px;
}

#twitter {
border:outset 7px #E8E3E5;
display: inline-block;
width:250px;
}

Thanks for any help!!

[Paulie_D]

Here’s the thing.

You can’t centre something in a page by using (margin: 0 auto) AND have something next to it as the item next to it will reduce the amount of margin available.

Basically, you can centre the image in it’s own div as long at there is nothing beside it.

You could fake it by using a few more unsemantic divs and playing with margins/padding/positioning but, personally, I wouldn’t.

[shannoroo]

Ok….so I am on totally the wrong track using margins, what about using {position}?

[wolfcry911]

shannoroo, more information is needed. What happens when the image is greater than 60% of the viewport? Do the image widths change or is this just for one specific image? Is the twitter feed just a second column or is to ‘ride’ up close to the image regardless of width?

[shannoroo]

sorry I should have taken that 60% out, that was just me playing around with trying to set the div to a % as a way of centering it- that was a fail!

The image does not change widths, it is set at 500px. This is just for one specific image.

I would like the twitter feed to be in a separate column to the right of the image, some distance from the image- this distance could be fixed or fluid (i.e. as I resize I don’t mid if the twitter element gets closer to the image, as long as it stays to the right. Ideally there would always be at least a small space between the two).

[wolfcry911]

so this is indeed a dynamic width page (whether 60% or not) and not fixed width…

my point is it could be auto centered fixed width (very simple) or centered dynamic (more difficult). What other content is on the page?

Do you have a mockup?

[shannoroo]

well, yes, ideally. I think if it was a fixed width page then I could do it using absolute positioning, I believe….its the dynamic centering that I can’t figure out. (Sorry if I am not being clear, as I said, I am pretty new at this, I appreciate your patience!!).

[wolfcry911]

Here’s one way. This is a fixed width wrapper (in this case .frontpage, but you could make it another). This will work for viewports 1060px and wider, but cause a scrollbar for smaller widths. Simple, but probably not the solution you’re looking for. However, if you think about, what you’re asking for is to center a 500px wide element and have room to the right of it for 250px wide element – so in theory you’ll need approximately 1000px anyway…

Here’s another option. This is more complicated but will work at sizes under 1000px until eventually the twitter feed will drop.

And one more. Here the twitter feed is positioned absolutely. The problem here is twofold – you’ll get a scrollbar under 1000px and the feed won’t drop but disappear to the right of the viewport.

[shannoroo]

Thanks so much, I will play around a but with these later, I tried them all out and they don’t work exactly but I think with some tweaking I can make one of them work.

I will let you know what I end up doing.

[Author]

Posts