CODEWITHSUNDEEP
phphtmlcss
Jay
Jay

Reputation: 646

How to prevent div wrapping in php html

I am having trouble with the webpage in php that I'm trying to make. The 2 divs inside the main div kept getting wrapped. I am trying to arrange it in a way that the rifleman blue is on the left and the rifleman red is on the right of the page since the user will be comparing both riflemen's stats. I am not good with CSS but will push myself if it's the only solution since my neck already hurts so bad and still couldn't find a way to do this. My target browsers are just FF and Chrome. I need a way to make 2 displayed in one line on the page and not make the 2nd div below the 1st div.

<?php
$profpic = "darkbg.jpg";
?>

<html>

<style type="text/css">
body {
background-image: url('<?php echo $profpic;?>');
}
</style>

<body>
<img src="headergiflong.gif" style="width:100%;height:30%;"><br>

<div>
<div style="display:inline;width:200;height:300;background-color:blue;">
<select id="comparea">
  <option value="rifleman.php">Rifleman</option>
  <option value="mortarman.php">Mortarman</option>
  <option value="machinegunner.php">Machine Gunner</option>
  <option value="javelin.php">Javelin</option>
</select>
<br>
<iframe id="compare1" style="background-color:black; color:white; border:0;" src="rifleman.php" width="45%" height="300"></iframe>
</div>

<br>

<div style="display:inline;width:200;height:300;background-color:red;">
<select id="compareb">
  <option value="rifleman.php">Rifleman</option>
  <option value="mortarman.php">Mortarman</option>
  <option value="machinegunner.php">Machine Gunner</option>
  <option value="javelin.php">Javelin</option>
</select>
<br>
<iframe id="compare2" style="background-color:black; color:white; border:0;" src="rifleman.php" width="45%" height="300"></iframe>
</div>
</div>

</body>
</html>

Upvotes: 0

Views: 96

Answers (3)

radha
radha

Reputation: 782

give iframe width as 100% for both divs...

and for left div give style as

float:left;
width:49%;

for right div give style as

float:right;
width:49%;

Upvotes: 0

SW4
SW4

Reputation: 71150

Change:

<body>
  <img src="headergiflong.gif" style="width:100%;height:30%;"><br>    
  <div>

To:

<body>
  <img src="headergiflong.gif" style="width:100%;height:30%;"><br>    
  <div style='width:400px;overflow:hidden;'>

The basic issue is that the two items are set to display inline, with a fixed width of 200px - therefore if the available space is less than 400px, they will wrap to a new line. By setting the width of the parent container to 400px, it ensures the children will have the minimum width available in order to display on the same line.

Your alternatives would be either to float the two elements, or to use display:table

SEE THIS FIDDLE

..for the three different approaches you can use.

Upvotes: 1

Fabian Marz
Fabian Marz

Reputation: 219

try this

<?php
$profpic = "darkbg.jpg";
?>

<html>

<style type="text/css">
body {
    background-image: url('<?php echo $profpic;?>');
}
</style>

<body>
    <img src="headergiflong.gif" style="width:100%;height:30%;"><br>

    <div style="width: 100%; max-width: 960px;">
        <div style="width: 50%; float: left; background-color:blue;">
            <select id="comparea">
                <option value="rifleman.php">Rifleman</option>
                <option value="mortarman.php">Mortarman</option>
                <option value="machinegunner.php">Machine Gunner</option>
                <option value="javelin.php">Javelin</option>
            </select>
            <br>
            <iframe id="compare1" style="background-color:black; color:white; border:0;" src="rifleman.php" width="100%" height="300"></iframe>
        </div>

        <div style="width: 50%; float: left; background-color:red;">
            <select id="compareb">
                <option value="rifleman.php">Rifleman</option>
                <option value="mortarman.php">Mortarman</option>
                <option value="machinegunner.php">Machine Gunner</option>
                <option value="javelin.php">Javelin</option>
            </select>
            <br>
            <iframe id="compare2" style="background-color:black; color:white; border:0;" src="rifleman.php" width="100%" height="300"></iframe>
        </div>
        <div style="clear: both;"></div>
    </div>

</body>
</html>

Upvotes: 1

Related Questions