1 reply [Last post]
ClintonLee83
ClintonLee83's picture
Offline
newbie
US
Last seen: 5 years 39 weeks ago
US
Timezone: GMT+2
Joined: 2014-11-15
Posts: 1
Points: 2

Here is the code you can mess around with:

http://codepen.io/anon/pen/ByaVGm

What I need:
-the www div to be fixed width floating left,
-the domaininput (blue) div to be flexible with browser resize
-the selector div (orange) to be fixed width floating right.
*with 10px fixed space between each element.

example:

|-www-| |——--------–blue—--------—–| |-orange-|

when browser width is resized:

|-www-| |–---blue---–| |-orange-|

It’s been driving me crazy, I'm sure it's and easy one.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 46 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Try this approach

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test document</title>
  <style type="text/css">
/*<![CDATA[*/
 
  html, body {
    font: normal 100%/1.25em sans-serif;
    margin: 0;
    }
 
  #home_www {
    background-color: green;
    float: left;
    margin-right: 10px;
    padding: 0 .5em;
    width: 90px;
    }
 
  #home_selector {
    background-color: orange;
    float: right;
    margin-left: 10px;
    padding: 0 .5em;
    width: 90px;
    }
 
  #home_domaininput {
    background-color: blue;
    color: white;
    overflow: hidden;
    padding: 0 .5em;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div id="container2">
    <div id="home_www">
      <p>www.</p>
    </div>
 
    <div id="home_selector">
      <div id="orange">
        <p>And I&#39;m orange.</p>
      </div>
    </div>
 
    <div id="home_domaininput">
      <p>Hi, I&#39;m blue.</p>
    </div>
  </div>
</body>
</html>

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.