Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newbie HTML/CSS Help

    Hey guys.

    My name's Starko and I have just joined the forum. It looks great.

    I was after some help if that's possible?

    I am a total noob when it comes to HTML/CSS and I'm trying to make my first web site.

    I have encountered a problem when trying to sit 2 <div> next to each other on a page. I have floated one left and the other right and they sit fine until you come out of fullscreen and move one side of the browser window to make it smaller. This is when the <div> floated right moves underneath the left <div>.

    HTML:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>P&amp;O Motors</title>
        <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1'></script>    
        <script type='text/javascript' src='js/infinite-rotator.js'></script>
      </head>
      <body>
        <header>
          <a href="index.html" id="logo">
            <h1>P&amp;O Motors</h1>
            <h2></h2>
          </a>
          <nav>
            <ul>
              <li><a href="index.html" class="selected">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </nav>
        </header>
        <div id="wrapper">
          <div id="rotating-item-wrapper">
            <img src="images/greenpeople.jpg" alt="a person entering a building" class="rotating-item" width="980" height="347" />
            <img src="images/entrance.jpg" alt="photo of building across from our office" class="rotating-item" width="980" height="347" />
            <img src="images/bluepeople.jpg" alt="building entrance with neon backlit walls" class="rotating-item" width="980" height="347" />
            <img src="images/reflection3.jpg" alt="building lobby window reflections" class="rotating-item" width="980" height="347" />
            <img src="images/reflection2.jpg" alt="reflection on building windows" class="rotating-item" width="980" height="347" />
            <img src="images/manequine.jpg" alt="two manequines in window" class="rotating-item" width="980" height="347" />    
          </div>
          <div id="home-main">
            <h2>Welcome to P&amp;O Motors.</h2>
            <p><br>We are an established, independent company in London with over 50 years of experience within the motor industry.<br><br>We specialize in Jaguar, Mercedes, Range Rover and BMW, but carry out servicing, repairs, diagnostics, MOTs and bodywork on all makes and models of cars.<br><br>Give us a call and we can discuss how we can help and keep your car running to its full potential.</p>
          </div>
          <div id="home-map">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2481.125202624548!2d-0.2022102000000196!3d51.54760315000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487610656db99977%3A0x7541639de174949a!2sLondon+NW6+2EE!5e0!3m2!1sen!2suk!4v1406143850230" width="400" height="300" frameborder="0" style="border:0"></iframe>
          </div>
        </div>
          <footer>
            <p>&copy; 2014 P&amp;O Motors.</p>
          </footer>
        </div>
      </body>
    </html>
    CSS:
    Code:
    /**************************
    GENERAL
    **************************/
    
    body {
      font-family: 'Verdana', sans-serif;
      background-color: #E6F0EB;
      color: #223C2C;
    }
    
    #wrapper {
      max-width: 980px;
      margin: 0 auto;
      padding: 0 0;
    }
    
    a {
      text-decoration: none;
      color: #74B28E
    }
    
    a:hover {
      text-decoration: underline;
    }
    
    img {
      max-width: 100%;
    }
    
    
    
    /**************************
    HEADER
    **************************/
    
    header {
      background: #223C2C;
      float: left;
      margin: 0 0 30px 0;
      padding: 5px 0 0 0;
      width: 100%;
      border-bottom: 5px solid #0F1C14;
    }
    
    #logo {
      float: left;
      margin-left: 5%;
      text-align: left;
      text-decoration: none;
      width: 45%;
    }
    
    h1 {
      font-size: 32px;
      color: #ffffff;
    }
      
    h2 {
      font-size: 24px;
      margin-bottom: 20px;
      color: #223C2C;
    }
    
    
    
    /**************************
    NAVIGATION
    **************************/
    
    nav {
      background: none;
      float: right;
      font-size: 1.125em;
      margin-right: 5%;
      text-align: right;
      width: 45%;
    }
    
    nav ul {
      list-style: none;
      margin: 30px 0;
      padding: 0;
    }
    
    nav li {
      display: inline-block;
    }
    
    nav a {
      font-weight: 800;
      padding: 15px 10px;
    }
    
    nav a, nav a:visited {
      color: #ffffff;
    }
    
    nav a:hover {
      color: #74B28E;
      text-decoration: none;
    }
    
    nav a.selected {
      color: #74B28E;
    }
    
    
    
    /**************************
    FOOTER
    **************************/
    
    footer {
      font-size: 0.75em;
      text-align: center;
      clear: both;
      padding-top: 150px;
      color: #000000;
    }
    
    
    
    /**************************
    PAGE: HOME
    **************************/
    
    #rotating-item-wrapper {
      position: relative;
      width: 980px;
      height: 350px;
      top: 99px;
    }
    
    .rotating-item {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    #home-main {
    background-color: #E6F0EB;
    width: 560px;
    min-height: 200px;
    margin-top: 97px;
    float: left;
    
    }
    
    #home-map {
    background-color: #E6F0EB;
    width: 400px;
    min-height: 200px;
    margin-top: 120px;
    float: right;
    }
    Any ideas?

    Thanks in advance,
    Starko.

  • #2
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    91
    Thanks
    14
    Thanked 1 Time in 1 Post
    Hello Starko and welcome to the CodingForums!

    The floating property in CSS is designed to act this way. Floating elements side by side is a technique often used in responsive design to ensure content maintains its readability without the need to zoom.

    To counter-act the issue you are having, you should look at either fluid container widths (using % for example), or CSS3 media queries that can change the width/height of content based on the windows size.

    Here's a couple of useful links:
    CSS Media Queries
    Percentages in CSS

    Media queries can make the CSS become quite complex so I would advise ignoring the issue for now whilst you become more prominent in HTML and CSS. Maybe start with a couple of simple examples!

    Hope I have helped.

    Kind Regards
    Owen Ayres

  • #3
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Owener94 View Post
    Hello Starko and welcome to the CodingForums!

    The floating property in CSS is designed to act this way. Floating elements side by side is a technique often used in responsive design to ensure content maintains its readability without the need to zoom.

    To counter-act the issue you are having, you should look at either fluid container widths (using % for example), or CSS3 media queries that can change the width/height of content based on the windows size.

    Here's a couple of useful links:
    CSS Media Queries
    Percentages in CSS

    Media queries can make the CSS become quite complex so I would advise ignoring the issue for now whilst you become more prominent in HTML and CSS. Maybe start with a couple of simple examples!

    Hope I have helped.

    Kind Regards
    Owen Ayres
    Thanks for your help Owen. I changed the widths to fluid values and it fixed the issue.

    Many thanks,
    Starko.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •