CSS - Increasing Size of Holder or What Ever Its Called

css - increasing size of holder or what ever its called

Ya I don't think you are going to have much luck here...

The white sace you see on the left isn't from your website its from the mlsfinder website. Hence if you don't have control over that website, getting ride of that space is not going to possible.

Also, because of this, if you don't want to make your site any wider, you are not going to fit the iframe in.

Unless you control mlsfinder, the only options is to make your website smaller or pop open a new window or present the iframe in a javascript popup box like fancybox...

Sorry to bring bad news.

EDIT:

You could get rid of a little bit of the white space on the right by changing the iframe width from 1000px to 700px like so:

<iframe scrolling="no" frameborder="0" style="width: 700px; height: 650px;" src="http://www.mlsfinder.com/ca_sandicor/raphaelshapiro/index.cfm">
    ....
</iframe>

EDIT 2:

To make your site wide so that it fits this iframe you will need to do the following (in each case note the width difference) also this assumes that you are getting rid of the background image...

<iframe scrolling="no" frameborder="0" style="width: 850px; height: 650px;" src="http://www.mlsfinder.com/ca_sandicor/raphaelshapiro/index.cfm">

</iframe>

div#main_full {
float:left;
margin:0 0 6px;
width:850px;
}

#content {
margin:0 auto;
overflow:hidden;
padding:10px 0 0;
width:1050px;
}

div#wrapper {
margin:0 auto;
padding:10px 0 0;
width:1050px;
}

Placeholder font-size bigger than 16px

The input and its placeholder must have matching font styles

input {
    display: block;
    width: 400px;
    padding: 0 20px;
}

input,
input::placeholder {
    font: 20px/3 sans-serif;
}

<input type="text" placeholder="Example Input">

Changing image sizes proportionally using CSS

This is a known problem with CSS resizing. Unless all images have the same proportion, you have no way to do this via CSS.

The best approach would be to have a container, and resize one of the dimensions (always the same) of the images. In my example I resized the width.

If the container has a specified dimension (in my example the width), when telling the image to have the width at 100%, it will make it the full width of the container. The auto at the height will make the image have the height proportional to the new width.

Example:

HTML:

<div class="container">
    <img src="something.png" />
</div>

<div class="container">
    <img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* Resize images */
.container img {
    width: 100%;
    height: auto;
}

How do I fit a fieldset to the size of its content with CSS?

This isn't possible because position: relative makes the element render normally, then shift, so the fieldset "thinks" the element is in its normal-rendered state.

The only real option to fix this dynamically is to use Javascript, as seen in this jsFiddle which uses jQuery to change the height css property.

Maintain the aspect ratio of a div with CSS

Just create a wrapper <div> with a percentage value for padding-bottom, like this:

.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div class="demoWrapper">
  <div></div>
</div>

Why doesn't height: 100% work to expand divs to the screen height?

In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>, which can be a percentage height. .

So, you've given all of your elements height, except for the <html>, so what you should do is add this:

html {
    height: 100%;
}

And your code should work fine.

* { padding: 0; margin: 0; }html, body, #fullheight {    min-height: 100% !important;    height: 100%;}#fullheight {    width: 250px;    background: blue;}

<div id=fullheight>  Lorem Ipsum        </div>

Swap placeholder text based on resolution (media query)

As a pure CSS solution, we could have two <input>s - having different placeholders - which are shown in different screen sizes - Example here:

input.large { display: inline-block; }input.small { display: none; }
@media (max-width: 399px) {   input.large { display: none; }  input.small { display: inline-block; }}

<input type="email" name="email[]" class="required email large" id="mce-EMAIL" placeholder="Your Email"><input type="email" name="email[]" class="required email small" placeholder="Join our newsletter">

CSS - Increasing Size of Holder or What Ever Its Called