473,722 Members | 2,274 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

centering two divs

red
How do I center two side by side divs ?

I've been writing css pages for a while but there's one thing tha still
eludes me.
I can center a div with margin auto.
I can place two divs side by side with float.
But I can't center two side by side divs.
If I float them and give them auto margins, the auto margins are ignored.

If I wrap the two floated divs in another div, the two divs have no
concept of the other div.

So either I need some way to make the divs side by side without floating
them, or I need some other way to center them.

Any ideas ? I run across this problem all the time and the best I can do
is give the left and right margins artisticly pleasing values, but
centered they ain't.

red
Jul 21 '05 #1
15 13503
On Thu, 28 Oct 2004 17:20:58 GMT, red <gr*****@reenie .org> wrote:
How do I center two side by side divs ?

I've been writing css pages for a while but there's one thing tha still
eludes me.
I can center a div with margin auto.
I can place two divs side by side with float.
But I can't center two side by side divs.
If I float them and give them auto margins, the auto margins are ignored.

If I wrap the two floated divs in another div, the two divs have no
concept of the other div.

So either I need some way to make the divs side by side without floating
them, or I need some other way to center them.

Any ideas ? I run across this problem all the time and the best I can do
is give the left and right margins artisticly pleasing values, but
centered they ain't.


Wrap them in one div which is centered and set to position: relative with
no offset so it will serve as the containing block. Then set both inner
divs to width: 50% (or thereabouts, depending on margins etc.).
Jul 21 '05 #2
red
Neal wrote:
Wrap them in one div which is centered and set to position: relative
with no offset so it will serve as the containing block. Then set both
inner divs to width: 50% (or thereabouts, depending on margins etc.).

Do I float the 2 divs first before I do this ? Other wise they aren't
side by side.
Jul 21 '05 #3
On Thu, 28 Oct 2004 17:50:41 GMT, red <gr*****@reenie .org> wrote:
Neal wrote:
Wrap them in one div which is centered and set to position: relative
with no offset so it will serve as the containing block. Then set both
inner divs to width: 50% (or thereabouts, depending on margins etc.).

Do I float the 2 divs first before I do this ? Other wise they aren't
side by side.


You could, or you can use positioning. Remember, when the wrapper div is
set to a non-static position, it's now the containing block, and you can
safely absolute-position the inner divs with respect to it.
Jul 21 '05 #4
On Thu, 28 Oct 2004 17:20:58 GMT, red <gr*****@reenie .org> wrote:

[snip]
If I wrap the two floated divs in another div, the two divs have no
concept of the other div.
I'm not quite sure what you mean there. Do you mean that they don't
position themselves with respect to one another, resulting in them being
off-centre?
So either I need some way to make the divs side by side without floating
them, or I need some other way to center them.

Any ideas ?


If the DIVs are of equal width, its quite simple with absolute
positioning. Give the left DIV the declaration:

#left {
position: absolute;
right: 50%;
}

and the right DIV:

#right {
left: 50%;
position: absolute;
}

preferably using more meaningful ids.

If they aren't the same width, you will have to wrap them in a DIV and
position that:

/* Obviously, you'll have to replace the
* expressions with actual values.
*/
#container {
left: 50%;
margin-left: -(<n>/2)em;
position: absolute;
width: <n>em;
}

#left {
left: 0;
position: absolute;
}

#right {
position: absolute;
right: 0;
}

I only have a limited number of browsers I can test with, but Opera 7, IE
6 (thankfully[1]), and all Mozilla versions handle this as planned.

Mike
[1] I'm sure I remember reading somewhere that IE doesn't respect right:
and bottom:. Perhaps it's rubbish or problems with earlier versions.
Anyone shed any light here?

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 21 '05 #5
red
Michael Winter wrote:
On Thu, 28 Oct 2004 17:20:58 GMT, red <gr*****@reenie .org> wrote:

[snip]
If I wrap the two floated divs in another div, the two divs have no
concept of the other div.

I'm not quite sure what you mean there. Do you mean that they don't
position themselves with respect to one another, resulting in them
being off-centre?
So either I need some way to make the divs side by side without
floating them, or I need some other way to center them.

Any ideas ?

If the DIVs are of equal width, its quite simple with absolute
positioning. Give the left DIV the declaration:

#left {
position: absolute;
right: 50%;
}

and the right DIV:

#right {
left: 50%;
position: absolute;
}

preferably using more meaningful ids.

If they aren't the same width, you will have to wrap them in a DIV and
position that:

/* Obviously, you'll have to replace the
* expressions with actual values.
*/
#container {
left: 50%;
margin-left: -(<n>/2)em;
position: absolute;
width: <n>em;
}

#left {
left: 0;
position: absolute;
}

#right {
position: absolute;
right: 0;
}

I only have a limited number of browsers I can test with, but Opera 7,
IE 6 (thankfully[1]), and all Mozilla versions handle this as planned.

Mike
[1] I'm sure I remember reading somewhere that IE doesn't respect
right: and bottom:. Perhaps it's rubbish or problems with earlier
versions. Anyone shed any light here?

I tried this and it doesn't treat the #left and #right differently, so
they both end up in the middle over each other.

Maybe I didn't follow the instructions exactly but I can't find any
mistakes. Here's the page I'm working on- it validates both for css and
html. Can you look at it and see what I'm doing wrong?
http:/cardini.tv/newindex.php

The layout is supposed to be #header at the top, and #main under it.
#main is supposed to contain #side and #text next to each other, and
centered. But as you can see, both #side and #text are centered
individually, so you can't see #side at all.

#main{
left:50%;
margin-left:-20em;
position:absolu te;
width:40em;
}

#side{
position:absolu te;
left:0;
}

#text{
position:absolu te;
right:0;
background:#FFF FFF;
}
Jul 21 '05 #6
On Fri, 29 Oct 2004 01:22:26 GMT, red <gr*****@reenie .org> wrote:

[snip]
I tried this and it doesn't treat the #left and #right differently, so
they both end up in the middle over each other.
That's because I forgot to mention you need to include widths, otherwise
both DIVs will take 100% of the space. Sorry.

[snip]
http:/cardini.tv/newindex.php


When you specify borders, rather than specify each property separately,
just use the shorthand:

border: <width> <style> <colour>;

Also remember to take the border sizes into account when you specify the
container width otherwise you'll get some overlap.

[snip]

Good luck,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 21 '05 #7
red wrote:
Here's the page I'm working on- it validates both for css and
html. Can you look at it and see what I'm doing wrong?
http:/cardini.tv/newindex.php

The layout is supposed to be #header at the top, and #main under it.
#main is supposed to contain #side and #text next to each other, and
centered. But as you can see, both #side and #text are centered
individually, so you can't see #side at all.

#main{
left:50%;
margin-left:-20em;
position:absolu te;
width:40em;
}

#side{
position:absolu te;
left:0;
}

#text{
position:absolu te;
right:0;
background:#FFF FFF;
}


Instead of using Absolute positioning, use Static or Relative positioning.
Declare a width and center #main - in Flow due to Static positioning
used below.
Declare a width and Float #side to the left and #text will flow to the
right.
Apply a left Margin to #text in order to clear the paragraph backgrounds.
This should get you back in the picture and then do some tweaking:

#main{width:90% ;margin:auto;}
#side{float:lef t;width:25%;}
#text{margin-left:25%;backgr ound:#ffffff;}

--
Gus
Jul 21 '05 #8
red
Michael Winter wrote:
On Fri, 29 Oct 2004 01:22:26 GMT, red <gr*****@reenie .org> wrote:

[snip]
I tried this and it doesn't treat the #left and #right differently,
so they both end up in the middle over each other.

That's because I forgot to mention you need to include widths,
otherwise both DIVs will take 100% of the space. Sorry.

[snip]
http:/cardini.tv/newindex.php

When you specify borders, rather than specify each property separately,
just use the shorthand:

border: <width> <style> <colour>;

Also remember to take the border sizes into account when you specify
the container width otherwise you'll get some overlap.

[snip]

Good luck,
Mike

Now it works great!- thanks- I feel so relieved as this has been dogging
me for awhile.
Jul 21 '05 #9
red
Gus Richter wrote:
red wrote:
Here's the page I'm working on- it validates both for css and html.
Can you look at it and see what I'm doing wrong?
http:/cardini.tv/newindex.php

The layout is supposed to be #header at the top, and #main under it.
#main is supposed to contain #side and #text next to each other, and
centered. But as you can see, both #side and #text are centered
individually, so you can't see #side at all.

#main{
left:50%;
margin-left:-20em;
position:absolu te;
width:40em;
}

#side{
position:absolu te;
left:0;
}

#text{
position:absolu te;
right:0;
background:#FFF FFF;
}

Instead of using Absolute positioning, use Static or Relative positioning.
Declare a width and center #main - in Flow due to Static positioning
used below.
Declare a width and Float #side to the left and #text will flow to the
right.
Apply a left Margin to #text in order to clear the paragraph backgrounds.
This should get you back in the picture and then do some tweaking:

#main{width:90% ;margin:auto;}
#side{float:lef t;width:25%;}
#text{margin-left:25%;backgr ound:#ffffff;}

--
Gus


That works too, and it avoids absolute positioning. But now I'm
wondering why I had such a problem in the first place. I thought the
floated div was ignoring the wrapper. I guess not.
The code below is how I would normally do this, and now it works. I must
have done it wrong somehow. Yours lets the window get smaller before the
#text jumps to the bottom, which is good.
#main{width:90% ;margin:auto;}
#side{float:lef t;width:25%;}
#text{float:lef t; background:#fff fff; width:65%;}
Jul 21 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
15031
by: Jeff Thies | last post by:
I have a series of blocks that are float left that I need centered on the page. <div class="center" align="center"> <div style="width: 100 px;float: left">thumbnail 1</div> <div style="width: 100 px;float: left">thumbnail 2</div> <div style="width: 100 px;float: left">thumbnail 3</div> </div>
3
4798
by: Chris | last post by:
Hi, I am pretty new to CSS authoring and find myself in a tricky situation. I have a series of divs (dynamically generated - there could be up to 8) as follows: <div class="person"> <h2>Name</h2> <img src="images/name.gif" alt="Chris" /> <p>Message Here</p>
1
3941
by: David Ehmer | last post by:
Most pages at www.boatingartgallery.com.au have the main content in a div. I have centered this with margin: auto, but need to find a simple solution to ensure centering is applied in IE5.5, which doesn't center the divs with margin: auto. Appreciate any suggestions David
5
2647
by: Robert J. O'Hara | last post by:
For some time I've made use of the max-width property in CSS to cause my pages to appear as a centered block against a contrasting background. This works well in new browsers (Mozilla, etc.) and falls back fine in IE6 and lesser creations. As one who practices "classic" (i.e. dull) typography, this has always been satisfactory since I've always used one-column pages. I'm now trying a two column layout so I can include a sidebar, and am...
13
1952
by: Raffi | last post by:
Hi, We have an application that requires IE. We recently incorporated CSS scroll areas. The scroll fields are supposed to be centered. They are except for IE5 for the Mac. I have tried various suggestions on the net without any luck. I have the code for the whole page below. I've taken out all the Mac specific code that I tried and didn't work. Centering is done by a separate <div> tag. If anyone knows how to get the scroll area to...
3
7853
by: rsteph | last post by:
I'm using two divs to create a shadowed-box type effect. Within the top div I want to put an image. I can get the image to center right to left, but not top to bottom. I'm making a series of boxes, and the images in them aren't all the same size. So I've sized the boxes to mach the largest of them, and I want to center them, so those that are smaller will be in the middle of the first div. Here's the code on the page: <table border="0"...
2
3061
by: rudicheow | last post by:
SHORT VERSION ============= I have a bunch of identical fixed-size single-celled tables that rest against each other horizontally thanks to "float:left". These tables are dynamically generated and the number of them can vary greatly. They are all contained within a parent table cell, which is centred on the page. But I am unable to find a way of centering these table cells within the parent cell.
11
2018
by: Cartoper | last post by:
Here is the code: http://cartoper.ueuo.com/centering.htm How do I get the big blue buttons to center themselves on Firefox and Safari on this web site? I know that the layout is a bit complex, but there is a reason for it, have a look at this site:
1
2208
by: yawnmoth | last post by:
I'd like to center two floated divs but am unsure of how to do so. Here's my code: http://www.frostjedi.com/terra/scripts/demo/div-float-center.html It seems like setting the width of the outer div to 200px might work but I don't want to do that because you're not always going to know the width in advance...
0
8860
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8739
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9236
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9154
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6681
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5995
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4502
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4762
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
2147
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.