I have this CSS code:
#header {
width: 100%;
background: yellow;
}
#content {
width: 100%;
}
#col1 {
width: 200px;
float: left;
background: red;
}
#col2 {
width: 600px;
background: yellow;
margin: 0px 0px 0px 200px;
}
#col3 {
width: 200px;
float: right;
background: blue;
}
#footer {
width: 100%;
height: 90px;
background: black;
clear: both; **<~ This**
}
HTML code:
<div id="header"></div>
<div id="content">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
<div id="footer"></div>
Question:
Is the propertie clear: both need in footer in case of footer different level with colx (col1, col2, col3)?
If you are floating elements inside the footer then yes a clear:both may be required. If you are not floating elements inside the footer then you can take the clear:both out.
Another way to deal with floated elements is to use a structure like this:
<div class="con">
<div class="lft">lft</div>
<div class="rgt">rgt</div>
</div>
.con { overflow:hidden; }
.lft { width:100px; float:left; }
.rgt { width:100px; float:left; }
Related
I created a div based table. I'm trying to take a image, put it in top left table cell and make it responsive. I've made it responsive, but its not in the table cell I want it to be. Any help?
JSFiddle:
https://jsfiddle.net/benjones337/3c4fkb78/18/
HTML
<div class="hmTable">
<div class="hmTableRow">
<div class="hmTableCell"><p class="rspimg1"></p></div>
<div class="hmTableCell"><p class="rspimg2"></p></div>
</div>
<div class="hmTableRow">
<div class="hmTableCell">textholder</div>
<div class="hmTableCell">textholder</div>
</div>
</div>
CSS
.hmTable {
margin: 0 auto; /* or margin: 0 auto 0 auto */
display: table;
width: 50%;
}
.hmTableRow {
display: table-row;
}
.hmTableCell, .hmTableHead {
display: table-cell;
width: 50%;
height:100%;
border: 1px solid #999999;
position:relative;
}
.hmTableBody {
display: table-row-group;
}
.rspimg1{
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Red_triangle_with_thick_white_border.svg/1152px-Red_triangle_with_thick_white_border.svg.png");
background-repeat:no-repeat;
background-size:100% 100%;
width:100%;
height:100%;
position:absolute;
}
.rspnimg2{
}
When using background-image, the div doesn't grow with the image, so you will need to give it a height/width, either to the cell or the image div (btw, I changed your p to div, as p is for text rather than image).
Below sample I'm pretty sure look close to what you are after, and If not, drop me a comment and I'll fix it for you.
html, body {
margin: 0;
height: 100%;
}
.hmTable {
margin: 0 auto;
display: table;
width: 50%;
height: 30%;
}
.hmTableRow {
display: table-row;
height: 10%;
}
.hmTableCell, .hmTableHead {
display: table-cell;
width: 50%;
height:100%;
border: 1px solid #999999;
}
.rspimg1{
background: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Red_triangle_with_thick_white_border.svg/1152px-Red_triangle_with_thick_white_border.svg.png") center no-repeat;
background-size: contain;
width:100%;
height:100%;
}
.rspnimg2{
}
<div class="hmTable">
<div class="hmTableRow">
<div class="hmTableCell">
<div class="rspimg1">triangle</div>
</div>
<div class="hmTableCell">
<div class="rspimg2">square</div>
</div>
</div>
<div class="hmTableRow">
<div class="hmTableCell">textholder</div>
<div class="hmTableCell">textholder</div>
</div>
</div>
Remove position:absolute or add top:0 to .rspimg1.
Result
I'm trying to build a template using divs.
A top div width 100%, no problem there.
Beneath that on the left and the right a small div both 200px
in between the main container consisting of two of columns both 50% of what is left.
My problem is these two colums get the size of 50% of the viewport, so the second column is placed under the main view.
HTML:
<div id="top">
<div class="but">top 1234</div>
<div class="but">top 5678</div>
<div class="but">top 91011</div>
<div class="but">top 121314</div>
</div>
<div id="middle">
<div id="butsRight">
<div class="butv">right1234</div>
<div class="butv">right567</div>
<div class="butv">right8910</div>
</div>
<div id="butsLeft">
<div class="butv">left1234</div>
<div class="butv">left5678</div>
<div class="butv">left91011</div>
</div>
<div id="middleMain">
<div id="middleMainL">
<div id="middleMainLb">LEFT QQQQQ
<br>CCCCC
<br>hhhhhh</div>
<div id="middleMainLm">
<table width=100% height=100% border=2>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="middleMainLo">LEFT
<p>eee</p>
<p>fff</p>
<p>ggg</p>
<p>hhh</p>
</div>
</div>
<!--middleMainL -->
<div id="middleMainR">
<div id="middleMainRb">RIGHT QQQQQ
<br>CCCCC
<br>hhhhhh</div>
<div id="middleMainRm">RIGHT
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
<p>dddd</p>
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
</div>
<div id="middleMainRo">RIGHT
<p>eee</p>
<p>fff</p>
<p>ggg</p>
<p>hhh</p>
</div>
</div>
<!--middleMainR -->
</div>
<!-- middlemain -->
</div>
<!-- middle -->
CSS:
body, html {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#top {
margin-right: 80px;
background-color: green;
width: 100%;
text-align: center;
}
.middle {
width: 100%;
height: 100%;
background-color: yellow;
}
#butsLeft {
height: 100%;
width: 200px;
float: left;
background-color: green;
}
#butsRight {
height: 100%;
width: 200px;
float: right;
background-color: green;
}
#middleMain {
background-color: gray;
width:100%;
height:100%;
}
#middleMainL {
width:50%;
float: left;
background-color: black;
}
#middleMainR {
width:auto;
float: left;
background-color: brown;
}
#middleMainLb {
width: 100%;
float: center;
background-color: green;
text-align: center;
}
#middleMainLm {
width: 100%;
float: center;
background-color: purple;
text-align: center;
overflow: visible;
}
#middleMainLo {
width: 100%;
float: center;
background-color: green;
text-align: center;
}
#middleMainRb {
width: 100%;
float: center;
background-color: green;
text-align: center;
}
#middleMainRm {
width: 100%;
float: center;
background-color: purple;
text-align: center;
}
#middleMainRo {
width: 100%;
float: center;
background-color: green;
text-align: center;
}
div.but {
text-align: center;
width: 200px;
background-color: orange;
position: absolut;
display:inline-block;
}
div.butv {
text-align: center;
width: 200px;
background-color: orange;
position: absolut;
height: 33%;
}
Right, I had a little look at it and this is what I came up with. Please do look into it a little to understand the code. Its fairly straight forward.
HTML:
<div id="header">Header</div>
<div id="right">Right Side Bar: Fixed width.</div>
<div id="left">Left Side Bar: Fixed width.</div>
<div id="content">
<div>
<div id="middleleft">Middle Left</div>
</div>
<div>
<div id="middleright">Middle Right</div>
</div>
</div>
CSS:
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
* {
box-sizing:border-box;
}
#header {
width: 100%;
height: 100px;
background: red;
}
#right, #left {
width:200px;
height: 500px;
float:left;
background:orange;
}
#right {
float:right;
}
#content {
overflow:hidden;
height: 500px;
}
#content > div {
width: 50%;
height: 100%;
float:left;
}
#middleleft {
float:left;
height:100%;
width:100%;
background: blue;
}
#middleright {
float:left;
height:100%;
width:100%;
background: green;
}
DEMO HERE
I don't know why I did it, but this is what you want (maybe? 'cause I didn't really understood the question)
http://jsfiddle.net/KTd8T/1/
When you were doing your css, you were doing some .example when example was a div. If it's a div, put #, if it's a class put "."
Now you can work on this copy and just try to write clear code.
There is another point: you are doing a top, and middle content, but you don't have a bottom content. Maybe this is why it's not display like you want ?
Thanks for editing your post and try to be more explicite !
HTML:
<div id="main">
<div id="sidebar"></div>
<div id="content"></div>
</div>
CSS:
#content {
background: blue;
height: 900px;
}
#sidebar {
float: left;
width: 200px;
height: 900px;
background: red
}
JSFIDDLE: http://jsfiddle.net/aFrPc/
While this works, I would like to have #content listed first (instead of #sidebar).
Div #content must fill all remaining space.
Image of final wanted result:
UPDATED If he wants the content text before the sidenav text.
Fiddle
<div id="main">
<div id="content">
<div style="padding-left:200px">
Context
</div>
</div>
<div id="sidebar">sidebar</div>
</div><!--#main-->
#content {
background: blue;
height: 900px;
width:100%;
margin-left:-200px;
float:right;
color:#fff;
}
#sidebar {
float: left;
width: 200px;
height: 900px;
background: red;
}
Try this. #Content is listed first, and takes up 100% of the remaining space after a 200px sidebar:
body{
overflow-x:hidden;
}
#content {
background: blue;
height: 900px;
position:absolute;
width:100%;
left:200px;
}
#sidebar {
float: left;
width: 200px;
height: 900px;
background: red
}
Jsfiddle: http://jsfiddle.net/VkQ6U/
What I want to do is have a <div> with a container class and a fixed width, holding a <div> with the block class to prevent other content encroaching on any uneven blank space, then two columns (<div>'s) side-by-side inside the block, and to be 50% of the width of the block.
When I create this, I get what appears to be a margin after the first block, which I do not want. I want the block to pack up tight, no margins.
I have an example here of what I have so far, and here if the code:
<html>
<head>
<title>Columns</title>
<style>
div {
margin: 0;
padding: 0;
}
.container {
background: #DDD;
width: 1200px;
margin: 0 auto;
padding: 2% 0;
}
.block {
background: #555;
width: 100%;
display: block;
}
.col {
width: 49%;
display: inline-block;
background: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
</div>
</div>
</body>
</html>
Your problem is being causes by inline-block, using this makes a space appear inbetween.
Try using float:left to get around this:
See on jsFiddle
.col {
width: 50%;
float: left;
box-sizing: border-box;
background: #333;
}
Note that I added, box-sizing:border-box; this means when you use padding it will be included in the width, not on top of it. Effectively enabling the use of it without an extra inner div.
Remember to include a clear fix afterwards also to "clear" the floats.
CSS
.clear {
clear:both;
}
HTML
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
<div class="clear"></div>
</div>
Try replacing these classes:
.block {
background: none repeat scroll 0 0 #555555;
display: block;
overflow: auto;
width: 100%;
}
.col {
width: 49%;
float: left;
background: #333;
}
.container {
background: #DDD;
width: 900px;
margin: 0 auto;
padding: 30px 30px 30px 30px;
}
.block {
background: #555;
width: 100%;
display: block;
}
.block:after {
content: "";
display: table;
clear: both;
}
.col {
width: 50%;
float: left;
background: #333;
}
I need the following in a header of fixed width:
A div of varying width floated left.
A div of varying width floated right.
An h2 centered between them that takes up any remaining space.
The floated divs contain content that may vary in size.
I've tried various approaches but they have all failed. I know one solution is to absolutely position the outer divs, then stretch the h2 out for the full width and center the text so it sits centrally, but there must be a nicer way to do this.
A basic jsFiddle example with minimal markup.
HTML
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
<h2>H2</h2>
</div>
CSS
#container {
border:1px solid #999;
}
#left {
float:left;
}
#right {
float:right;
}
h2 {
text-align:center;
margin:0;
}
You could use display: inline-block instead of float, and then use CSS calc to get the right width for the middle div:
HTML:
<div id="wrapper">
<div id="one"></div><div id="two"></div><div id="three"></div>
</div>
CSS:
#wrapper {
min-width: 300px;
}
#one, #two, #three {
display: inline-block;
height: 300px;
}
#one {
background: lightgreen;
width: 100px;
}
#two {
background: lightblue;
width: 100%;
width: calc(100% - 300px);
width: -webkit-calc(100% - 300px);
width: -moz-calc(100% - 300px);
}
#three {
background: lightgreen;
width: 200px;
}
jsFiddle Demo
You can then put the h2 inside the the middle div, in this case #two.
Considering the following HTML:
<div id="parent">
<div id="left">Left</div>
<h2>Heading</h2>
<div id="right">Right</div>
</div>
CSS Code:
#parent {
width: 80%;
margin: auto;
display: table;
}
#parent div, #parent h2 {
display: table-cell;
}
#left, #right {
width: 50px;
}
Demo: http://jsfiddle.net/MAhmadZ/pMfLx/
try this out
i think it may solve your problem
<style type="text/css">
div{
display: inline-block;
vertical-align: top;
height: 50px;
border: 1px solid red;
position: static;
}
#one{
float: left;
width: 100px;
}
#three{
float: right;
width: 100px;
}
</style>
<div id="outerDiv" style="width: 500px;height: 500px;border: 1px solid red;">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<script type="text/javascript">
var spaceLeft = document.getElementById("one").offsetWidth;
var spaceRight = document.getElementById("three").offsetWidth;
var totalSpace = document.getElementById("outerDiv").offsetWidth;
document.getElementById("two").style.width = totalSpace-(spaceLeft+spaceRight+4) + "px";
</script>