Make empty div background colour fill entire div vertically - html

I have a div inside a div and I want the inside div to either contain a background colour or background image. My code is:
<div class="row two">
<div class="cols n15">
<h2 class="latestVideo">Latest Video</h2>
<iframe width="100%" height="370" src="//www.youtube.com/embed/a-XQL60NVmQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cols n9 clearfix">
<h2>Other Videos</h2>
<div class="otherVids">
<p>"test"<p>
<!-- <img src="images/otherVideos.jpg" alt=""> -->
<div class="video1">
</div>
<div class="vidoe2">
</div>
<div class="video3">
</div>
</div>
<div style="clear:both"></div>
Right now this makes it look like this:
What I want is for the red box to extend all way down and match the height of the div on the left side. I realize that this would work if I have the div(otherVids) a height and width, but if I do this the website won't be responsive anymore.
So if there anyway to make the div background fill up the empty space while still remaining responsive?
Here is the CSS code I have:
.otherVids{
background-image: url('images/otherVideos.jpg');
background-color: red;
width: 100%;
height: 100%;
}

Try setting the height of otherVids to be equal to the iframe.
Add height:370px; to the css of .otherVids

You can try two method,the first thing is:
.otherVids{
min-height:370px;
}
or:
.otherVids{
height:370px;
overflow-y:scroll;
}
if your video list is to many,you need to design the content responsive.
finally,I think you don't need use width:100%,because div is block element.

Related

CSS Layout - best way to have a wrapper

Isn't the first time I want all content inside all sections are in a container with a max-width, but the only solution is duplicate html tags. Something like this:
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
Putting a div "wrapper" inside looks like the only solution to control every section with a max-width/centered and keeps the ability to put a full-width backgound in few section.
I don't like this solution, is a div duplicated for every section with same properties. If someday I change my mind and want remove it or I need to do it in every section or I need to remove css to that selector. Its look not semantical for me.
Any solution?
I would create a div like this
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
Then you can control max width from one place for all section. IF you don't want max width for a section, remove the site container div from within that section. You change your mind on the width? Change it in one place. You decide to go 100% width, change the width to 100% inside that div. Makes it easy to manage sitewide..
Your css
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
Then if you add another div,
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>

image won't appear on the webpage

I have added a few images on my html but it doesn't show up on the webpage. The directory path for the images are correct and the first image appeared before i added the rest. I thought it was something to do with the height so i added height on the css but still nothing.
Not sure if it helps to figure out without the images but i have pasted my codes below:
<section class="pictures">
<div class="container">
<div class="row1">
<div id="first" class="img1" style="background-image:url(images/page-1_img1.jpg);">
</div>
<div id="second" class="img2" style="background-image:url(images/page-1_img2.jpg);">
</div>
</div>
<div class="row2">
<div id="third" class="img3" style="background-image:url(images/page-1_img3.jpg);">
</div>
<div id="fourth" class="img4" style="background-image:url(images/page-1_img4.jpg);">
</div>
<div id="fifth" class="img5" style="background-image:url(images/page-1_img5.jpg);">
</div>
</div>
</div>
</section>
CSS:
.container {
height: 500px;
width:1024px;
}
Thank you.
Since you are using the images as background-images, you have to define at least a height (preferably also a width) for all their containers, i.e. #first, #second etc.
Otherwise (since they don't have any other content) those elements will have zero height, so the background-images will remain invisible
Addition: Actually, it makes more sense to use img tags instead of using the images as background-images, if you are not aiming at any special solution that requires background-images. If you insist on using background-images, you also have to define their size and no-repeat.

How to set up a height for a <div> in responsive css designs?

I am trying to make a responsive website. My issue is if i am not setting a div height then the bottom of the div content has come up and overlay with the top div contents. Also if I sets a height, when i see it in responsive it takes the full height and show white space. Can you guys please sort it out?
You want something like this:
<div style="height:20%"> CONTENT </div>
or
<div style="height:40px"> CONTENT </div>
use % to specify the amount of space your div will get in your current container or px for the number of pixels
http://www.w3schools.com/cssref/pr_dim_height.asp
Friends, this is my sample coding
<div class="row clearfix">
<div class="left-banner">
<img src="" alt="">
</div>
<div class="right-banner">
<img src="" alt="">
</div>
</div>
<div class="container">
<p></p>
</div>
CSS part:
.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}
For mobile responsive, I want to hide the right banner div so I did 'display: none;' but the container div came up and overlay with the row div. I just want to hide the right banner without any affect of other divs.

How to make two div’s stand side by side

I have this html
<div class="portlet-header" style="width: 447px">
<h3>Total Calls Statuses</h3>
</div>
<div id="vertical-chart-total-calls-statuses" class="chart-holder">
<canvas class="overlay" width="478" height="300"></canvas>
</div>
</div>
<div class="portlet" style="background-color:green; float:right; ">
<div class="portlet-header" style="width: 447px">
<h3>Inbound</h3>
</div>
<div id="vertical-chart" class="chart-holder">
<canvas class="overlay" width="478" height="300"></canvas>
</div>
</div>
I don't have any CSS, but I do have HTML. Here is the current result of my code:
http://i.stack.imgur.com/mFEO3.png
I need the green div to be side by side with the red one, how do I do this?
Here’s a JSFiddle:
http://jsfiddle.net/Tn58S/
Put all the content within a container DIV with a width sufficient to hold both portlet DIVs, i.e. with a width of 956px as each of your portlet DIVS contains a CANVAS with a width of 478px. So:
<div style="width: 956px"><!-- your content here --></div>
See this jsfiddle example
After checking the full code provided in your jsfiddle, I recommend the following changes:
chartsclass needs to be wide enough to contain its content, which is 958px. So add a max-width of 958px to this class.
As you have also set chartsclass to a width of 80%, this means that the width of contentArea, which contains chartsclass and informationClass, needs to be a minimum of 1198px, as 958 is 80% of 1198.
As informationClass is set to 20%, it needs to be set to a maximum width of 240px.
As the logoArea needs to be a width of 100%, remove the float: left so that it remains as a block level element.
I've updated your jsfiddle
Just change
<div class="portlet" style="background-color:green; float:right; ">
to
<div class="portlet" style="background-color:green; float:left; ">
and make sure to resize the window to make room for both divs.
Set the widths of the main divs to be 50%
http://jsfiddle.net/yaHwj/
width:50%

Styling <divs> with CSS3

I'm able to align and center graphpaper and footer as needed but I'm unable to get the colorpicker div to exist next to these to. No matter what I try it ends up being below the rest of these. Is there a way to have the two divs centered vertically and then put the colorpicker div next to these two?
<div id="abstract">
<div class="graphpaper" id="graphpaper" onclick="getPosition(event)" style="width:984px; height:1100px;">
<img src="images/poster/poster-top.png" align="left"/>
<img src="images/poster/poster-left.jpg" align="left" style="margin-left:12px;"/>
<canvas id ="canvas" width = "898" height = "900"/>
<img src="images/poster/poster-right.jpg" align="right" style="margin-right:10px;"/>
</div>
<div class="footer" id="footer">
<img src="images/poster/poster-bottom.png"/>
</div>
<div class="colorpicker" id="colorpicker" style="width: 70px; clear:both;">
<img src="images/color-tab/no-color.png" id="unselected" class="unselected"/><br>
<img src="images/color-tab/color-dark.png" id="dark_image" class="darkimage"
onclick="getColor('#00ccff','images/color-tab/color-dark.png')"/><br>
<img src="images/color-tab/color-medium.png" id="med_image" class="medimage"
onclick="getColor('#000000','images/color-tab/color-medium.png')"/><br>
<img src="images/color-tab/color_light.png" id="light_image" class="lightimage"
onclick="getColor('#ff0066','images/color-tab/color_light.png')"/><br><br><br><br>
</div>
</div>
In order to do this you need to float all of your divs to the left, and give them widths that add up to 100% (ie. 40%, 40%, 20%).
This is my best guess without seeing your question as a jsfiddle
1.) Removed the Footer div and added the img to the graphpaper div
2.) set colorpicker to position:fixed; and set margin-top:300; so it would be starting in the proper place.