hey guys thanks for the upcoming support how do I set the blue to fill up the remaining width of the whole maininfo div? I tried setting the width:auto
<div class="maininfo">
<div class="large">2</div>
<div class="smallblock">
<div class="smalltop">3</div>
<div class="small">4</div>
</div>
<div class="smallblock">
<div class="smalltop">5</div>
<div class="small">6</div>
</div>
</div>
.maininfo {
width: 600px;
}
.large {
float: left;
height: 95px;
background-color: blue;
width:auto;
}
.smallblock {
float: right;
height: 90px;
margin: 0 0 0 5px;
width: 20%;
}
.small {
background-color: red;
height: 50%;
width: 100%;
}
.smalltop {
background-color: red;
height: 50%;
width: 100%;
margin-bottom:5px;
}
UPDATED MY JFIDDLE BUT NOW IT MAKES 2 LINES: http://jsfiddle.net/4ykf5frk/11/
If just .maininfo, merely add a 'background: blue;' property to your style declaration:
.maininfo {
background-color: blue;
width: 600px;
}
Otherwise, just add a 'background: blue;' property for the 'body' element:
body {
background-color: blue;
}
Related
I want split screen only two div's for that purpose write this html code:
<div class="box">
<div class="div1">
<img src="../Content/45.png" style="width:auto;" />
</div>
<div class="div2">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="clear"></div>
</div>
and this is css style:
<style>
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: 50%;
}
div.div2 {
background: #666;
height: 100%;
width:50%;
left:100px;
float:right;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
but when i run that page,i see this output:
Why i can not split screen?what is correct css?thanks.
Its working fine..
Check
https://jsfiddle.net/3d5mq1tf/
Please update the fiddle .. If you find something missing..
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: 50%;
}
div.div2 {
background: #666;
height: 100%;
width:50%;
left:100px;
float:right;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
<div class="box">
<div class="div1">
<img src="../Content/45.png" style="width:auto;" />
</div>
<div class="div2">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="clear"></div>
</div>
Your code is working up to the point where the image gets rendered, which will stretch over the bounds of your div because you don't tell it otherwise.
While the only parts you need to add are the image width ones, I took the liberty and turned this from a float-based arrangement to in inline-based one, giving you reduced markup as well as CSS, and better control over what you're doing.
div.box {
background: #EEE;
height: 100px;
width: 600px;
white-space: nowrap;
}
div.box > div {
display: inline-block;
height: 100%;
vertical-align: top;
width: 50%;
}
div.box > div img {
width: 100%;
}
.div1 {
background-color: #999;
}
.div2 {
background-color: #666;
}
<div class="box">
<div class="div1">
<img src="http://i.imgur.com/k8BtMvj.jpg" alt="test image" />
</div><div class="div2"></div>
</div>
I suspect that you also want the image to have a maximum height of 100px, as the parent container has. If you do, you could use overflow: hidden on the parent container, but you would be better off rendering it as a background image, like this:
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.box > div {
display: inline-block;
height: 100%;
vertical-align: top;
width: 50%;
}
div.box > div img {
width: 100%;
}
.div1 {
background: #999 url('http://i.imgur.com/k8BtMvj.jpg') left top no-repeat;
background-size: cover;
}
.div2 {
background-color: #666;
}
<div class="box">
<div class="div1"></div><div class="div2"></div>
</div>
This also shows the differences in where you should use background vs background-color
Goal: In the content area of a site, I need to make a decorative-only column that spans the height of two divs (containing images) beside it.
Problem: the column either has no height, regardless which attributes I give it, or only has the height of the first sibling div and no fill. I have tried height: 100%, min-height: 100%. Also tried making parent position: absolute and setting top: 0 and bottom: 0.
the code:
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
#B1 {
float: left;
width: 84%;
height: 100px; /* this will actually be the height of the img */
background-color: green;
}
#B2 {
width: 84%;
height: 100px; /* this will actually be the height of the img */
float: left;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
Thanks in advance for your help.
what I want: http://i.stack.imgur.com/sgr5g.png
What I get: http://i.stack.imgur.com/lS63m.png
You should change the left column to position: absolute.
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 20%;
position: absolute;
height: 100%;
background-color: red;
}
#B1 {
float: right;
width: 80%;
height: 100px;
background-color: green;
}
#B2 {
width: 80%;
height: 100px;
float: right;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
In your code you have height: 100px; /* this will actually be the height of the img */ for both img in your .row
You can do it like this also, fiddle http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/
in this example I set the height of 200px to the row and height of 100% to the column
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
height: 200px;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
Here's an alternate solution I found that works very well, too.
.row {
display: table-row;
}
#colLeft {
display: table-cell;
width: 15%;
background-color: red;
}
#B1 {
display: table-cell;
width: 84%;
height: auto;
background-color: green;
}
#B2 {
display: table-cell;
width: 84%;
height: auto;
background-color: #ff0;
}
Hi i has created this simple design:
body{
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel{
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#audio{
width: 100%;
height: 11%;
background-color: red;
}
#term{
width: 100%;
height: 11%;
background-color: blue;
}
#content{
width: 100%;
height: 67%;
background-color: green;
}
#footer{
width: 100%;
height: 11%;
background-color: pink;
}
.term{
background-color: black;
height: 100%;
width: 25%;
display: inline-block;
border-right: solid red;
}
.term:first-child{
margin-left: 0;
}
.term:last-child{
border-right: none;
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term"></div>
<div class="term"></div>
<div class="term"></div>
<div class="term"></div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
But when I see the result, the divs which are in the term div have some space between each other. Setting the padding and margin to zero doesn't remove the space.
What should I do to remove the space to set the divs exactly near to each other?
One solution is to use in term container display: flex:
body {
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel {
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#audio {
width: 100%;
height: 11%;
background-color: red;
}
#term {
width: 100%;
height: 11%;
background-color: blue;
display: flex;/*Add display flex*/
}
#content {
width: 100%;
height: 67%;
background-color: green;
}
#footer {
width: 100%;
height: 11%;
background-color: pink;
}
.term {
background-color: black;
height: 100%;
width: 25%;
display: inline-block;
border-right: solid red;
}
.term:first-child {
margin-left: 0;
}
.term:last-child {
border-right: none;
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term">asd</div>
<div class="term">asd</div>
<div class="term">asd</div>
<div class="term">asd</div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
Reference
flex
the problem is that Inline-block have some default spaces ,
use Float to left better than Inline-block and use a clearfix class :
#term{
width: 100%;
height: 11%;
background-color: blue;
**overflow: hidden;**
}
.term{
background-color: black;
height: 100%;
width: 25%;
**float : left ;**
border-right: solid red;
}
http://jsfiddle.net/n0zxmgoy/
As stated earlier, any white space between inline blocks is retained in the layout, so one way
of getting rid of it is to make sure that the inline block elements have no intervening space
in the HTML mark-up.
Also, you need to set a reference height so that the height percentage values work as expected.
I did this by adding height: 100% to the html and body tags.
Also, make sure to add a height value to the #header element, which makes the arithmetic
a bit easier to deal with.
A subtle point involves the right border on the .term elements. You can either use the
CSS calc value or box-sizing: border-box, you can try either.
html, body {
height: 100%; /* this may be needed... */
}
body{
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel{
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#header {
width: 100%;
height: 22%;
}
#audio{
width: 100%;
height: 11%;
background-color: red;
}
#term{
width: 100%;
height: 50%;
background-color: blue;
}
#content{
width: 100%;
height: 67%;
background-color: green;
}
#footer{
width: 100%;
height: 11%;
background-color: pink;
}
.term{
background-color: black;
height: 100%;
width: calc(25% - 2px);
/* box-sizing: border-box; optional alternative */
display: inline-block;
border-right: 2px solid red;
}
.term:first-child{
margin-left: 0;
}
.term:last-child{
border-right: none;
width: 25%; /* you need to consider this... */
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term"></div><div class="term"></div><div class="term"></div><div class="term"></div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
An example of my code can be found on JSFiddle http://jsfiddle.net/WdZgV/
CSS
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.header_div {
display: inline-block;
width: 100%;
text-align: center;
}
.header {
display: inline-block;
height: 100px;
width: 100%;
max-width: 1000px;
background: #ddd;
}
.logo {
float: left;
width: 200px;
height: 100px;
background: #bbb;
}
.menu {
float: left;
width: 800px;
height: 100px;
background: #999;
}
</style>
HTML
<div class="header_div">
<div class="header">
<div class="logo"></div>
<div class="menu"></div>
</div>
</div>
What i want is that when you resize the window width to less than 1000px the .menu div resize to the size of the parent div.
So as an example:
If you have your window width as 900px, the .logo div has 200px and the .menu div has 700px.
Is there anyway i can do this with CSS, or i need to use Javascript?
Yes — remove the float, don't specify width, and set overflow to hidden. Example here; .menu becomes:
.menu {
height: 100px;
background: #999;
overflow: hidden;
}
#Andoni Roy Use this
.logo {
float: left;
width: 200px;
height: 100px;
background: #bbb;
}
.menu {
float:right;
overflow:hidden;
height: 100px;
background: #999;
}
You may not want to play with floating properties but specifying the parent width and display to table.
Like in the following example: http://jsfiddle.net/A8zLY/745/
You would end up having something like:
HTML
<div class="header_div">
<div class="header">
<div class="logo"></div>
<div class="menu"></div>
</div>
</div>
CSS
.header_div {
width: 1280px;
}
.header {
display: table;
}
.logo {
display: table-cell;
width: 280px;
}
.menu {
display: table-cell;
width: 1000px;
}
You could specify width in percentages.
I created a simple two column layout based on this:
How to control overflow of table cell in Firefox?.
The left columns should be scrollable (top-down) and the right one should be fix.
HTML:
<div id="col1">
<div id="list">
<div class="row">Test 1</div>
<div class="row">Test 2</div>
<div class="row">Test 3</div>
<div class="row">... more rows</div>
</div>
</div><div id="col2"></div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #0c0;
}
#col1 {
width: 25%;
height: 100%;
display:inline-block;
background-color: #c00;
}
#col1>#list {
width: 100%;
overflow: auto;
}
#col1>#list>.row {
padding: 5px;
border-bottom: 1px solid #ccc;
}
#col2 {
width: 75%;
height: 100%;
display:inline-block;
background-color: #00c;
}
Please see this demo:
http://jsfiddle.net/bitas/qRtjN/
Firefox 18.0.2 shows it nearly as expected. In other browsers the left column doesn't start at the top of the page but in the lower left corner.
It works as expected if I remove the "div#list". What's wrong with this div? How I can I fix it?
I have modified your CSS a bit and it does work. Here it is:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #0c0;
}
#col1 {
width: 25%;
height: 1000px;
display:inline-block;
background-color: #c00;
}
#col1>#list {
width: 100%;
height: 100%;
overflow: auto;
}
#col1>#list>.row {
padding: 5px;
border-bottom: 1px solid #ccc;
}
#col2 {
width: 75%;
height: 100px;
display:inline-block;
background-color: #00c;
position:fixed;
top:0;
right:0;
}
Adding this CSS will correct the alignment of your columns:
#col1, #col2 {
vertical-align: text-top;
}
http://jsfiddle.net/qRtjN/13/