Add Height, Width and Float
The next thing we’re going to do is add height, width and float to this so that this box couldn’t be someplace else besides where it can sit as an attention box in the middle of content. So that’s the next step is, to come back over here and look at our options and we are going to come down here under box-shadow and we’ll say, ‘width’ => $0[‘width’] and then we’re going to do the same thing again for height and we’ll call it ‘height’ and this will be ‘Container Height’ ‘Enter a Height for the container’ so we got height.
Then we’re going to say float and float is one of those automatic ones very much like width so we’re going to say ‘float’ and $o[‘float’] so we’ve added width, height and float. Then we come back down here and we’re going to do the same old thing really. We’re going to grab this number again and now the number is going to be width and we’ll say width and we’ll say “width: $width;” else false and then exactly the same thing for height.
Checking for Floats
Float is not a number so it’s a bit different and we will just go ahead and just grab border-style here so all we have to do here is check to see whether or not float exists. If float has been set then we’ll say float and if it’s not empty float then float equals float else, it’s going to be false, else false. Something is not quite right here so got a problem here, what is it? If float is not empty, then say float, this option is float, close it out, else false, it’s that ending there it is.
I believe now we’ve got height, width and float in there correctly, save our document, we upload our document, we refresh this so we can see what our new options look like. We’re going to say width is 300 pixels, we won’t give it a height but we’ll say, let’s float that to the right and hit save, save the CSS and look and see what happens to this. There we go so it does in fact, float to the right and it stays the size that we want it to stay.