FLOAT DIV LAYOUT

PHPKING22 · December 8, 2010

How do you create a layout like this:

DIV

---------------- ----------------------------------------------------------------------------

| IMAGE | | TEXT { INPUT HERE } {IMAGE HERE} |

---------------- ----------------------------------------------------------------------------

BTW, everything has the height and should be leveled.

I can do it, but I want to know the best correct way to make it work. Correctly I use inline-blocks. I heard their bad practice, can someone explain why?

PHPKING22 · December 9, 2010

On my last post I mean't

has the same height***

and

Currently***

--------------------

I feel like I totally failed at using good code practices... It looks 100% perfect but did I use good code practices? I'm trying to learn how to properly make css layouts. Please look over my code and if I didn't code my layout the best way possible, please point that out.

index.php

<?
  $BROWSER_INFO = get_browser(null, true);
  $BROWSER_INFO_BROWSER = $BROWSER_INFO["browser"];
?>
<!DOCTYPE HTML>
<html>
  <head>
    <title>oddim</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <link rel="shortcut icon" href="graphics/favicon.ico">
    <?
    if($BROWSER_INFO_BROWSER == "Firefox"){
    ?>
      <link rel="stylesheet" type="text/css" href="styles/firefox.css">
    <?
    }elseif($BROWSER_INFO_BROWSER == "Chrome"){
    ?>
  <link rel="stylesheet" type="text/css" href="styles/chrome.css">
<?
}
?>
  </head>
  <body>
    <div class="main"><img class="logo" src="graphics/logo.png"><div type="text" class="menu">E-Mail<input class="login_e_mail">Password<input type="password" class="login_password"><img class="login" src="graphics/login.png"></div></div>
  </body>
</html>

styles/firefox.css

body
{
  margin: 0px;
  padding: 0px;
  background-color: #DDDDEE;
  font-family: Arial;
}
div.main
{
  margin: 10px auto 0px auto;
  width: 648px;
  height: 293px;
}
div.menu
{
  float: left;
  position: relative;
  margin: 0px 0px 0px 6px;
  padding: 5px 0px 0px 13px;
  width: 551px;
  height: 25px;
  background-image: url('http://www.oddim.com/graphics/menu.png');
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
}
input.login_e_mail
{
  position: relative;
  top: -1px;
  margin: 0px 18px 0px 10px;
  border: 1px solid #000000;
  padding: 2px;
  width: 158px;
  height: 14px;
}
input.login_password
{
  position: relative;
  top: -1px;
  margin: 0px 18px 0px 10px;
  border: 1px solid #000000;
  padding: 2px;
  width: 118px;
  height: 14px;
}
img.logo
{
  display: block;
  float: left;
}
img.login
{
  vertical-align: -4px;
}

Sign In

FLOAT DIV LAYOUT

Recommended Posts

PHPKING22

Link to comment

Share on other sites

PHPKING22

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information