8 replies [Last post]
pvo101
Offline
newbie
Last seen: 15 years 47 weeks ago
Joined: 2006-11-14
Posts: 8
Points: 0

hello

i centered a div using margin: 0 auto; - now i want to put another div right next to the centered one - the first should still be the one centered so i don't want to put them both in a container but i cannot use float cause it will destroy the center- is this possible?

mike

*edit - removed <> from around div so they show in the text - Tri

Triumph (not verified)
Anonymous's picture
Guru

Show what you have tried so

Show what you have tried so far.

pvo101
Offline
newbie
Last seen: 15 years 47 weeks ago
Joined: 2006-11-14
Posts: 8
Points: 0

nothing yet

i have not tried anything yet - since float apears to me as the only way to put divs next to each other without absolute positioning but i cannot use float here because of the margin: 0 auto; centering

mike

pvo101
Offline
newbie
Last seen: 15 years 47 weeks ago
Joined: 2006-11-14
Posts: 8
Points: 0

code

here is my code - i like to position a new div at the top left or right of the page div - page should stay centered

blog

html,body
{
background-color: #ffffff;
margin: 0px;
}

a
{
color: #ffffff;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

h1
{
margin: 0px;
padding: 8px 0 8px 0;
}

#page
{
margin: 0 auto;
width: 800px;
background-color: #b3987d;
font-family: sans-serif;
font-size: 12px;
color: #ffffff;
}

#top
{
padding: 4px;
width: 792px;
border-bottom: 1px dotted #ffffff;
}

#right
{
padding: 4px;
float:right;
width: 192px;
}

#left
{
padding: 4px;
float:left;
width: 591px;
border-right: 1px dotted #ffffff;
}

#bottom
{
padding: 4px;
clear:both;
width: 792px;
border-top: 1px dotted #ffffff;
}

top

left

bottom


mod edit/code tags added/tph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not sure what you want here

Not sure what you want here the main div is centred on the page and intended to hold the layout, at 800px wide it's already rather too wide for smaller screens I wouldn't go sticking any more width on it by way of another element outside it.

Are you sure that what your after is not a three column layout? you may need to sketch out the layout.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pvo101
Offline
newbie
Last seen: 15 years 47 weeks ago
Joined: 2006-11-14
Posts: 8
Points: 0

ads

thanks for the reply
i do not want a three colum layout - just a div for ads floating left or right to the layout but with the layout still centered on its vertical axis

mike

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not sure this is practical

Not sure this is practical or usual really, if you put another element alongside one that is fixed width centred what space do you have as the browser narrows? you could try fixing a width on the body, say 1000px then place the div absolute to the right edge of body and auto margining the body, to keep it centred

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

pvo101
Offline
newbie
Last seen: 15 years 47 weeks ago
Joined: 2006-11-14
Posts: 8
Points: 0

thx

thx

gcyrillus
Offline
Enthusiast
FR spoken
Last seen: 13 years 22 weeks ago
FR spoken
Timezone: GMT+2
Joined: 2005-11-16
Posts: 57
Points: 0

hello , maybe using

hello ,

maybe using absolute positioning you could have something like what you are looking for.

on the left; it will disappear with no scrolling possibilities , on the right, you will have a scroll bar when not seen.

blog

html,body
{
background-color: #ffffff;
margin: 0px;
}

a
{
color: #ffffff;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

h1
{
margin: 0px;
padding: 8px 0 8px 0;
}

#page
{
margin: 0 auto;
width: 800px;
background-color: #b3987d;
font-family: sans-serif;
font-size: 12px;
color: #ffffff;
position:relative;
}
#extra1
{
width:200px;
height:200px;
position:absolute;
top:0;
right:-202px;
background-color: #b3987d;
font-family: sans-serif;
font-size: 12px;
color: #ffffff;
}
#extra2
{
width:200px;
height:200px;
position:absolute;
top:0;
left:-202px;
background-color: #b3987d;
font-family: sans-serif;
font-size: 12px;
color: #ffffff;
}

#top
{
padding: 4px;
width: 792px;
border-bottom: 1px dotted #ffffff;
}

#right
{
padding: 4px;
float:right;
width: 192px;
}

#left
{
padding: 4px;
float:left;
width: 591px;
border-right: 1px dotted #ffffff;
}

#bottom
{
padding: 4px;
clear:both;
width: 792px;
border-top: 1px dotted #ffffff;
}

top

left

bottom
google or some advert , i guess :)
google or some advert , i guess :)

I haded 2 extra div in your #page to see what it could behave like .

GC