Why positioning is not working?

jrahma

Hi,

I am trying to position My Account button to the right and the logo at the left but both should be at the same level. I am trying below code but the top position is not working. Why?

<img src="images/logo.jpg" style=" margin-top: 0; margin-left: 0px;">
<img src="images/my_account.png" style="margin-top: 0; margin-left: 500px;">

Please check the attached..

Thanks,
Jassim

top_positioning.png

Bonesnap

First, you really shouldn't be using inline styles; you'd be better off creating a class in your stylesheet and applying it to your elements.

Second, we can't really see any other styling applied to these images so it's hard to say; however, based on what's available, I'd say the reason they're on separate lines is because you're adding 500px to the left margin of the second image. Because of this they both can't fit on the same line, causing to to fall to the second line.

Using a quick measuring tool (MeasureIt), you can see what I am talking about here: http://i.imgur.com/bl7ynV3.png. The "My Account" image occupies the entire bottom. Remember, margin is physical "space", meaning it occupies its space and will move other elements to make itself fit.

jrahma

There is no other style attached to the image. I change the margin to 350 but still getting the same as you can see in the attached.

This is my style.css:

@import url(https://fonts.googleapis.com/css?family=Sigmar+One);

* {margin:0; padding:0;}

html
{
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: Tahoma, Geneva, sans-serif;
	color: black;
	margin: 0;
	padding: 0;
}

body
{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: #ffffff;
}

div.logo
{
	margin-top: 0px;
	margin-left: 0px;
}

div.my_account
{
	margin-top: 0;
	margin-left: 350px;
}

and this is my code:

<?php
	include('includes/php_header.php');
	include('includes/session_expiry.php');
    // include($_SESSION["smashburger_absolute_path"] . '/includes/Mobile_Detect.php');
    include('includes/connect2db.php');

// $session_expiry->check_for_session_expiry();

// if (!isset($_SESSION["Smashburger_SessionId"]))
// { exit(header("Location: ./")); }
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Welcome to Smashburger</title>
    <?php include './includes/meta.php'; ?>
    <?php include './includes/jquery.php'; ?>
    <link rel="stylesheet" href="css/style.css">
</head>
<body style="background: url(images/homepage.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">

<br>

<div style="background-color: #FFFFFF; border: 1px solid; border-radius: 25px; padding: 25px; width: 80%; margin: 0 auto;">

<div id="divBasket" style="background-color: #FFFFFF; position: relative; top: 0; border: 1px solid; border-radius: 25px; padding: 10px; width: 300px; float: right;">
<table width="100%" cellspacing="10">
<tr>
	<td>Item Name X Qty</td>
    <td>5.000</td>
</tr>
<tr>
	<td>Item Name X Qty</td>
    <td>3.000</td>
</tr>
<tr>
	<td>Item Name X Qty</td>
    <td>1.254</td>
</tr>
<tr>
	<td>Item Name X Qty</td>
    <td>4.235</td>
</tr>
<tr>
	<td colspan="2"><hr></td>
</tr>
<tr>
	<td align="right">Total :</td>
    <td>41.235</td>
</tr>
<tr>
	<td align="center" colspan="2"><img src="images/buy_now.png"></td>
</tr>
</table>
</div>

<div class="logo"><img src="images/logo.jpg"></div>
<div class="my_account"><img src="images/my_account.png"></div>

<table width="750" cellspacing="10">
<?php
    $mysql_query = $mysql_connection->prepare('CALL sp_populate_menu_items()');
    $mysql_query->execute();

while($mysql_row = $mysql_query->fetch())
{
?>
<tr>
    <td valign="top" rowspan="3" style="padding-bottom: 20px;"><img src="images/menu/<?php echo $mysql_row["item_guid"]; ?>.jpg" width="150" height="150" style="border: 1px solid; border-radius: 25px;"></td>
    <td colspan="2" valign="top" style="font-family: 'Sigmar One', cursive; font-size: x-large;"><?php echo $mysql_row["item_name"]; ?></td>
</tr>
<tr>
    <td valign="middle" style="font-family: 'Sigmar One', cursive; font-size: x-large;">BD <?php echo number_format($mysql_row["item_price"], 3); ?></td>
    <td><img src="images/add_to_basket.gif"></td>
</tr>
<tr>
	<td colspan="2" valign="top" height="100%" style="border-top: thin double #ff0000;"><?php echo $mysql_row["item_description"]; ?></td>
</tr>
<?php } ?>
</table>

</div>

<script type="text/javascript">
$(document).ready(function()
{	
    $('#btnRegister').click(function()
	{
		// $('#divLogin').hide();
		// $('#divRegister').show();
	});
});
</script>
</body>
</html>

my_account.jpg

jrahma

the code is also at http://order.smashburgerbahrain.com/menu

Kindly help....

Derokorian

Seems to be related to the fact you have the images inside of divs without using any display property on them. By default, divs display as block, meaning 2 divs will NEVER be side by side without adjusting the display property. Try adding "display: inline-block;" to both of the divs you have surrounding the images. I'd also point out you could put the images in the same div, and position them left and right.

For reference, you could and probably should be using developer tools in chrome or firefox when working on styles. You can highlight elements and see exactly the space they take up, both browsers even offer a 3D view to show you what's on top of what and overlapping where. You can adjust the styles live and see exactly how it changes the layout. Then when complete simply save off your changes.

jrahma

Thanks alot 🙂 i used the float right and left in same div.

I Appreciate..