CODEWITHSUNDEEP
layout
Webiter
Webiter

Reputation: 119

PHP page layout?

Have the following 3 polls presented in a Polling Center on a Website Page. They are stacked one on top of the other going down the page.

<?php   
    require_once('poll/poll.php');
    show_vote_control('1');

    ?><h2>Poll 2</h2><?php 
    show_vote_control('2');

    ?><h2>Poll 3</h2><?php 
    show_vote_control('3'); 
?>

But I want to present them side by side across the page! My mind must be blank as I can not achieve at the moment. Table layout brings up an error.

Thanks in advance for any directions.

Upvotes: 1

Views: 382

Answers (3)

Michael Meehan
Michael Meehan

Reputation: 11

See my example here: http://jsbin.com/avabet/1/

I prefer not to use clear fixes. Rather use % widths that equal 100% (remember right and left padding and margins) and float the containers to the left. I did like the suggestion of using divs around the tags.

Please note: the background and margin are for illustrative purposes only

.poll {
  width:31%;
  float:left;
  background:gray;
  margin: 1em 1%;
}

Upvotes: 0

SuperTron
SuperTron

Reputation: 4233

Do you have any CSS code that deals with the positioning of the actual web content?

PHP will just render into HTML, so the layout can be changed via CSS. Try styling your header tags so they appear side to side. You can try something like this:

<h2 style="position:relative;"> Poll 2 
<?php show_vote_control('2'); ?>
</h2>

on all your headers to see what I mean (This will just put them below each other). Alternatively, you can use div's to the same effect. See w3schools css tutorial for more info on cascading style sheets.

Upvotes: 0

Saladin Akara
Saladin Akara

Reputation: 2548

You need to use HTML and CSS to style the content. You can do something like the following:

<?php
    require_once('poll/poll.php'); // which you would put with the rest of your includes/requires
?>
<div class="clear"></div>
<div class="poll"><h2>Poll 1<h2><?php show_vote_control('1'); ?></div>
<div class="poll"><h2>Poll 2<h2><?php show_vote_control('2'); ?></div>
<div class="poll"><h2>Poll 3<h2><?php show_vote_control('3'); ?></div>
<div class="clear"></div>

And then your CSS would be something like:

.clear
{
    clear: both; // resets alignment rules
}

.poll
{
    float: left;
    // rest of the style information, like width height etc
}

Upvotes: 1

Related Questions