I have a code like
<div id="container" >
<div id="content"></div>
<table id="link" cellspacing=0px; cellpadding=0px;>
</table>
</div>
with css
#contentDiv {
width: 100%;
height:100%;
margin: 0;
}
#content {
width:90%;
height:60%;
margin-left:20px;
display: inline;
vertical-align: left;
z-index:40;
}
#link {
width:30%;
height:50%;
margin: 0;
margin-top:10px;
margin-right:10px;
float: right;
z-index:70;
}
i want it to display like
without absolute div floating over table
but its not displaying like that any help is appreciated?
Use a floating div but make the left-margin of the div a negative number so it 'floats' over the table
For example:
CSS:
#container {
width: 100px;
height: 100px;
float: left;
background-color: red;
}
#content {
width: 60px;
margin-right: -30px;
height: 60px;
float: right;
background-color: green;
}
HTML:
<div id="container">
<div id="content"></div>
</div>
works fine.
First: You have a container element, but no CSS statements tied to it. And you have a contentDiv CSS statement, but no corresponding HTML element.
Second: As davblayn mentioned, you can use a negative margin-left value.
#link {
...
margin-right:-40px;
...
}
See an example here (JSFiddle).
If you change the display property of each table element to block, it will force the table back into block mode and then everything works fine.
<div style="float:right;background:red;width:200px;">This is a test.</div>
<table style="display:block;background:green;">
<tr style="display:block;">
<td style="display:block;">
This is a very long string. This string should break to the next line instead of spanning across like usual.
</td>
Related
I'm having weird CSS issue.
This jsfiddle shows it well.
HTML:
<div class="container" style="text-align: left;">
<div class="leftBox">
<div class="innerWrapper" style="background: gray;">Left</div>
</div>
<div class="rightBox">
<div class="innerWrapper" style="background: green;">Right</div>
</div>
</div>
<div class="container" style="text-align:center; background:red; ">Weird</div>
CSS:
.container {
width: 640px;
margin: 0 auto;
}
.leftBox {
width: 340px;
float: left;
}
.rightBox {
width: 300px;
float: left;
}
.innerWrapper {
width: 300px;
}
I don't understand why the lower div consumes the margin between the upper ones.
I expected it to consume only the "row" below the upper two columns.
Tried several different positioning and "voodos" but nothing helped.
Any idea?
Thanks.
You need to clear the element you want on it's own line, see fiddle: http://jsfiddle.net/JT5HL/1/
or CSS:
.container {
clear: both;
width: 640px;
margin: 0 auto;
}
.leftBox {
width: 340px;
float: left;
}
.rightBox {
width: 300px;
float: left;
}
.innerWrapper {
width: 300px;
}
Either give "clear:both" property to your ".container" class which is the older method.
SEE Fiddle: *http://jsfiddle.net/KjtJu/1/*
Or use the new solution "overflow: hidden;" property to your ".container" class
See fiddle: http://jsfiddle.net/8M3L9/1/
Use <div class="clear"></div> in your html inside the container div
Use .clear{clear:both;} in your css.
HTML:
<div class="container" style="text-align: left;">
...
<div class="clear"></div>
</div>
CSS:
.clear{clear:both;}
DEMO
You can change your innerWrapper to 100%;
.innerWrapper {
width: 100%;
}
This seems to work.
http://jsfiddle.net/JT5HL/4/
<div class="container" style="text-align:center; background:red; clear:both; ">Weird</div>
Why not just close the gap in between the left and right by making width: 320px;?
See Fiddle :http://jsfiddle.net/JT5HL/7/
Or you could add a height to the container like this height: 20px; this will get rid of the red in the space.
See Fiddle : http://jsfiddle.net/JT5HL/8/
I'm trying to make fixed header that is splited in 3 parts on horizontal. The central part have 1000px width, other 2 parts have equal sizes with auto width. Also the left part have an image with an edge glued to the central part. I have tried a couple of solutions, however i accomplished this only by using tables. Can anyone help me with this?
You can make that using divs, displayed as table-cell.
HTML:
<div class="header">
<div class="l">l</div>
<div class="m">m</div>
<div class="r">r</div>
</div>
CSS:
.header {
display: table;
width: 100%;
table-layout: fixed;
}
.header > div {
display: table-cell;
}
.l {
background: lightblue;
}
.m {
background: lightgreen;
width: 500px;
}
.r {
background: lightblue;
}
Also check the demo.
I would restrict the use of tables to tabular data. Based on your description, I think this will work for you. What you are doing is setting a fixed width to your middle column and setting the width of the end columns to 50% and then setting a negative margin on each to half of the width of the center column. The CSS could be a little more efficient.
http://jsfiddle.net/CLRxq/1/
HTML
<div class="wrapper">
<div class="left">Add Image here</div>
<div class="center"> </div>
<div class="right"> </div>
</div>
CSS
.wrapper {
overflow: hidden;
}
.center {
float: left;
width: 1000px;
background: red;
}
.right {
float: right;
width: 50%;
background: green;
margin-right: -500px;
}
.left {
float: left;
width: 50%;
background: blue;
margin-left: -500px;
text-align: right;
}
You can do it with tables or divs, it's up do you, though, for flexibility and consistency I recommend doing it on divs.
Table:
<table width="1200" height="100">
<tbody>
<tr>
<td></td>
<td width="1000"></td>
<td></td>
</tr>
</tbody>
</table>
Div:
Go here, the center div is the big one, side div are the others, don't remove the clear div, it is only a float fix for the html. Just change the CSS accordingly to what you want.
http://jsfiddle.net/EsQak/
How to use div+css make three columns in html.
left and right columns width:auto, and middle one need width:990px(should be in the center) and they are height:100%.
HTML
<div style=" float:left; width:auto; height: 100%;background-color:#006;">Area1</div>
<div style=" float:left; width:990px; height: 100%;">Area2</div>
<div style=" float:left; width:auto; height: 100%;background-color:#006633;">Area3</div>
For this type of functionality you can use display:table property for this. Like this:
html,body{height:100%;}
div{
display:table-cell;
height:100%;
vertical-align:top;
}
Check this http://jsfiddle.net/K5H4e/
But it's not work till IE7 & below.
this will be easier using a table with three column .
general you shoud use something like this: Example on js-fiddle.
<div style="float:left; background-color:#006;" >Area1</div>
<div style="float:right; background-color:#006633;">Area3</div>
<div style="border:1px solid red;overflow:auto;" >Area2</div>
Note: You won't get the height of the rows align that easily, since they are independent elements.
EDIT:
in order to have the height:100%work on your divs, you need the following:
html, body {
margin: 0;
padding: 0;
height: 100%; /* important! */
}
div {
min-height: 100%;
}
EDIT2: updated fiddle
<div class="Division"><p>First Division</p></div>
<div class="Division"><p>Second Division</p></div>
<div class="Division"><p>Third Division</p></div>
.Division{
float: left;
width: 100px;
height: 200px;
border: 2px solid #000000;
margin-left: 10px;
}
How about this: jsfiddle
<div style="width:auto; height: 100%;background-color:#006;
display: inline">Area</div>
<div style="width:990px; height: 100%; display: inline">Area2</div>
<div style="width:auto; height: 100%;background-color:#006633;
display:inline">Area3</div>
This is my HTML
<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
How can I get this image by using only CSS? I guess with float, but how can I get the fifth div next to the first one?
Changing the HTML is NOT (!) an option.
My first comment would be that class names can't start with a number, so I really hope that you can edit the HTML for that. To answer your question ignoring this fact, if each element has a class, this is pretty simple. Just do this:
div {
float: left;
width: 200px;
height: 100px;
border: 1px solid #000;
display: block;
clear: left; }
div.5 {
float: none;
clear: none;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/mvwSL/
You have a few options:
Float and negative margins:
.five{float:right; margin-top:-500px;}
Demo
Or margins only
.five{margin:-500px 0 0 200px;}
Demo
Or relative positioning:
.five{position:relative; top:-500px; left:200px;}
Demo
Or absolute positioning:
.five{position:absolute; top:0; right:0;}
(Make sure the container is set to position:relative;)
Demo
First, classes with numeric values are not valid. You're quite screwed if you can't change them... With proper classes, a solution might be:
CSS :
div {float:left;clear:left}
div.c5 {float:right}
jQuery
$("div.c5").insertBefore("div.c1")
See this fiddle
#Wex
div:last-child{
float: none;
clear: none;
display: inline-block;
}
Try below: It works as you required but horizontally, you want vertically. But am sure it might help you.
#outer {
width: 500px;
margin: 300px 0 0 10px;
}
.inner {
background-color: red;
width: 100px;
height: 100px;
float: left;
margin: 10px;
}
<html>
<body>
<div id="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
</div>
</body>
</html>
I have a link outside a div like in the following example:
<a href="http://google.com">
<div id="Something" style="width:200px; height:100px; display:block; background-color:red; padding:0; margin:0;">
</div>
</a>
Now, the link does work on any part of the div, but it is also present outside the div, mainly to the right side of it where there isn't anything. How can I fix this to make the link only work inside the div tag?
Here's the code in jsfiddle: http://jsfiddle.net/BWPHS/
Note, DIV elements are display: block by default, so you don't need that in the DIV. What you do need to do is make the A the same height, and resolve the padding and margin to taste.
<div id="Something" style="width:200px; height:100px; background-color:red; padding:0; margin:0;">
</div>
http://jsfiddle.net/BWPHS/3/
Note, as sdleihssirc notes, HTML5 does allow it (if you use the DOCTYPE). Note, to resolve the specific issue for HTML5, you would need to apply the height and width to the A tag:
<a href="http://google.com" style="width: 200px; height: 100px; display:block; padding: 0; margin: 0; background: blue;">
<div id="Something" style="height: 100px; background-color: red; padding:0; margin:0;"></div>
</a>
http://jsfiddle.net/BWPHS/2/
And, as thirtydot points out, you can display: inline-block or float: left the #something element and apply display: block to the A and it should work perfectly for you:
#something,
#something a {
padding: 0;
margin: 0;
}
#something {
display: inline-block;
background: red;
}
#something a:link {
display: block;
width: 200px;
height: 100px;
}
<div id="something">
</div>
http://jsfiddle.net/BWPHS/6/
And you probably want to try to avoid using inline style attributes.