Hi everyone,
Here's my situation, i have a site and i want to display some contents as columns that are supposed to be dynamically created through PHP but i wanted these columns to be side-by-side and centered at the same time.
I used a div container with another div inside for centering the columns and then i was adding columns to that div, but the problem is that the columns get ontop of each other, so i used the float:left attribute to get all the columns side-by-side, but now they don't center anymore.
Maybe someone can shed some light on this?
thanks in advance for all the time and help.This should work:
In CSS:
body {
margin: 0;
padding: 0;
text-align: center; /* Centers layout in IE5-Win */
}
#footer {
clear: both;
}
#left {
float: left;
width: 200px;
}
/* IE-Win has many positioning bugs. Keeping the overflow hidden
prevents IE-Win from breaking the layout when #left's (or
#right's) contents are too wide. Hide from IE5-Mac. \*/
* html #left,
* html #right {
overflow: hidden;
position: relative;
}
/* End IE5-Mac hiding. */
#right {
float: right;
width: 400px;
}
#wrapper {
margin: 0 auto; /* Centers layout in standards browsers and IE6-Win */
padding: 0;
text-align: left; /* Reset text align to default */
width: 600px;
}
/* The following declaration prevents standards browsers from
cutting of parts of the right and left edges of the layout when
the screen is too narrow to fit the entire page. IE-Win doesn't
do this, nor does it support transparent backgrounds, so it is
hidden from IE-Win. */
html>body #wrapper {
border: 1px solid #000;
border-color: transparent;
}
And then in HTML:
<div id="wrapper">
<div id="right">
</div><!-- end right -->
<div id="left">
</div><!-- end left -->
<div id="footer">
</div><!-- end footer -->
</div><!-- end wrapper -->Hi, and thanks for you reply toicontien.
Maybe i haven't understood your explanation or i haven't explained myself right. I need to have a variable number of columns side by side but still centered.
So if variable was 1 i'd have a single column centered but if the variable was 2 i'd have two columns side by side still centered. The variable comes from php.
Maybe this just isn't possible, but thanks for all the help.
Best regardsHi once more,
i'll try to explain better what i have and what i want. Here goes:
I have this site where i want to get a variable number of columns (defined by php) to get horizontally centeredon the screen. I'm currently using CSS to define my layout and not using tables. Maybe someone has some idea on how i can get this thing done please?
here's the code i have so far:
in css:
#mainContainer {position:relative;float:left;margin:10px 0px 0px 10px;padding:8px;width:390px;background-color:#D1DCFD;border:1px solid #4D5B82;}
.columns {position:relative;float:left;width:100px;margin:0 auto;display:inline;}
#mainContainer is a div where the columns are added through PHP in a for cycle and the class .columns was getting them all nicely centered but the columns were being added below so i had to use the float:left to get the added columns to get side by side, but now the columns don't get centered anymore. Any ideas on solving this are extremely welcome.
Thanks in advance for your replies and help.You can have as many columns as you want. Just place them in the #wrapper DIV like I had above. It was more or less a simple example to give you the general idea. The dynamic number of columns will work as long as you define the #wrapper's width in pixels and the column widths in pixels. The reason is the 50% + 50% doesn't always = 100% issue (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&postid=203735#post203735">http://www.webdeveloper.com/forum/showt ... post203735</a><!-- m -->).
Here's my situation, i have a site and i want to display some contents as columns that are supposed to be dynamically created through PHP but i wanted these columns to be side-by-side and centered at the same time.
I used a div container with another div inside for centering the columns and then i was adding columns to that div, but the problem is that the columns get ontop of each other, so i used the float:left attribute to get all the columns side-by-side, but now they don't center anymore.
Maybe someone can shed some light on this?
thanks in advance for all the time and help.This should work:
In CSS:
body {
margin: 0;
padding: 0;
text-align: center; /* Centers layout in IE5-Win */
}
#footer {
clear: both;
}
#left {
float: left;
width: 200px;
}
/* IE-Win has many positioning bugs. Keeping the overflow hidden
prevents IE-Win from breaking the layout when #left's (or
#right's) contents are too wide. Hide from IE5-Mac. \*/
* html #left,
* html #right {
overflow: hidden;
position: relative;
}
/* End IE5-Mac hiding. */
#right {
float: right;
width: 400px;
}
#wrapper {
margin: 0 auto; /* Centers layout in standards browsers and IE6-Win */
padding: 0;
text-align: left; /* Reset text align to default */
width: 600px;
}
/* The following declaration prevents standards browsers from
cutting of parts of the right and left edges of the layout when
the screen is too narrow to fit the entire page. IE-Win doesn't
do this, nor does it support transparent backgrounds, so it is
hidden from IE-Win. */
html>body #wrapper {
border: 1px solid #000;
border-color: transparent;
}
And then in HTML:
<div id="wrapper">
<div id="right">
</div><!-- end right -->
<div id="left">
</div><!-- end left -->
<div id="footer">
</div><!-- end footer -->
</div><!-- end wrapper -->Hi, and thanks for you reply toicontien.
Maybe i haven't understood your explanation or i haven't explained myself right. I need to have a variable number of columns side by side but still centered.
So if variable was 1 i'd have a single column centered but if the variable was 2 i'd have two columns side by side still centered. The variable comes from php.
Maybe this just isn't possible, but thanks for all the help.
Best regardsHi once more,
i'll try to explain better what i have and what i want. Here goes:
I have this site where i want to get a variable number of columns (defined by php) to get horizontally centeredon the screen. I'm currently using CSS to define my layout and not using tables. Maybe someone has some idea on how i can get this thing done please?
here's the code i have so far:
in css:
#mainContainer {position:relative;float:left;margin:10px 0px 0px 10px;padding:8px;width:390px;background-color:#D1DCFD;border:1px solid #4D5B82;}
.columns {position:relative;float:left;width:100px;margin:0 auto;display:inline;}
#mainContainer is a div where the columns are added through PHP in a for cycle and the class .columns was getting them all nicely centered but the columns were being added below so i had to use the float:left to get the added columns to get side by side, but now the columns don't get centered anymore. Any ideas on solving this are extremely welcome.
Thanks in advance for your replies and help.You can have as many columns as you want. Just place them in the #wrapper DIV like I had above. It was more or less a simple example to give you the general idea. The dynamic number of columns will work as long as you define the #wrapper's width in pixels and the column widths in pixels. The reason is the 50% + 50% doesn't always = 100% issue (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&postid=203735#post203735">http://www.webdeveloper.com/forum/showt ... post203735</a><!-- m -->).