3 replies [Last post]
wonderland
wonderland's picture
Offline
Regular
Seattle
Last seen: 6 years 47 weeks ago
Seattle
Timezone: GMT-8
Joined: 2010-10-19
Posts: 20
Points: 28

here's the page: architecturalvisualisation3d.co.uk/hire-me/

So there's hireWrapper in red which contains two divs, hireMeText (just a line of text( and hireME (a form).

I've set each to have a distinct background so it's easier to find them. Wrapper in red, text in blue, form in yellow.

But a) I can't even see the color of the other divs, b) when I use a browser developer tool, their boundaries seem to stretch beyond the 450px I've set them and c) the wrapper isn't centered as per the margin auto.

Never managed to figure out in-line stuff so this would be good to know!

wonderland
wonderland's picture
Offline
Regular
Seattle
Last seen: 6 years 47 weeks ago
Seattle
Timezone: GMT-8
Joined: 2010-10-19
Posts: 20
Points: 28

PS. Code... #hireWrapper

PS. Code...

#hireWrapper {
 
	margin-left:auto;
	margin-right:auto;
	width: 1200px;
	height: 1200px;
	background-color: red;
 
 
}
 
#hireMeText {
	width: 450px;
	height: 800px;
	background-color: blue;
	display: inline;
	position:relative;
}
 
#hireMe {
 
	width: 450px;
	height: 800px;
	background-color: yellow;
	display: inline;
	position:relative
	position:relative;
}

<div id="hireWrapper">
<div id="hireMeText">
<h2>Hire Me</h2>
Please use the form on the right to contact me about your 3d architectural visualisation project.
 
</div>
<div id="hireMe">[formidable key=z9ncls]</div>
</div>

wonderland
wonderland's picture
Offline
Regular
Seattle
Last seen: 6 years 47 weeks ago
Seattle
Timezone: GMT-8
Joined: 2010-10-19
Posts: 20
Points: 28

I got it to work by just

I got it to work by just having each element float left and right. But I'm still curious as to how to get things to line up in-line.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 31 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I'm not sure what you want

I'd do this:

.hentry {
    margin: 0 0 48px;
    overflow: hidden;
    }

.entry-content, .entry-summary {
    font-size: 18px;
    margin: 0;
    overflow: hidden;
    padding: 8px 0 0;
    text-decoration: none;
    }

#hireWrapper {
    height: 660px;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    }

#hireMeText {
    float: left;
    height: 600px;
    width: 450px;
    }

#hireMe {
    float: right;
    height: 600px;
    width: 450px;
    }

The following needs to be got rid of, or some content added.

<div id="colophon"> </div>
<div id="footerBottom"> </div>
<div id="colophon-bot"> </div>

I'd do the following also:

#footerLinks {
    height: 20px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
    position: relative;
    top: 75px;
    width: 600px;
    }

In fact, I'd recode the footer like so:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />

    <title>test doc</title>

    <!-- hack for bug in Web Developer addon for Firefox -->
    <link rel="stylesheet"
	  type="text/css"
	  href="x" />

    <style type="text/css">
      
      body {
	background-color: darkgray;
	margin: 0;
        }
 
      ul#footer-menu {
        display: inline-block;
	list-style-type: none;
	padding: 0;
        }

      #footer {
        border: 1px dotted silver;
        color: white;
        display: table;
        margin: 1.2em auto;
        white-space: nowrap;
        }

      #copy-notice {
        border-right: 6px double;
        display: inline-block;
        padding-right: 10px;
        }

      #footer a {
        color: inherit;
        text-decoration: none;
        }

      #footer a:hover {
        text-decoration: underline;
        }
 
      li {
        display: inline-block;
        margin: 0 10px;
        }
 
      #wrapper {
        margin: 0  auto;
        width: 960px;
        }
 
    </style>
  </head>
  
  <body>
    <div id="wrapper">
      <div id="footer">
	<p id="copy-notice">
	  <a rel="home" 
	     title="Architectural Visualisation 3d" 
	     href="/">
	    Architectural Visualisation 3d © 2013</a>
	</p>

	<ul id="footer-menu">
	  <li><a title="Home" 
		 href="/">Home</a></li>

	  <li><a href="/blog/">Blog</a></li>

	  <li><a href="/contact/">Contact</a></li>

	  <li><a href="/hire-me/">Hire Me</a></li>

	  <li><a href="/portfolio/">Portfolio</a></li>
	</ul>
      </div> <!-- end footer -->
    </div> <!-- end wrapper -->
  </body>
</html>

I have too much time on my hands. Tongue

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.