I tried using this guy's tutorial of making a 2 column layout:
http://www.vanseodesign.com/css/2-column-layout-code/
Here's how mine came out : / http://jsfiddle.net/WrpA8/
The CSS:
#container {
width: 800px;
margin: 40px auto;
border: 1px solid black;
}
#header {
border: 1px solid black;
}
#sidebar {
float: left;
width: 200px;
padding: 4px;
border: 1px solid black;
}
#content {
float: left;
width: 600px;
padding: 4px;
border: 1px solid black;
}
#footer {
clear: both;
border: 1px solid black;
}
Border and padding contribute to an element's overall width. Try setting the border and padding to 0 and you'll see that the layout works as expected. If you want a border and padding, you'll have to factor their size in when you size the main element.
Your padding and border actually are eating up your content of 600px. So, try to make it to 580px for example and it will work.
#content {
float: left;
width: 580px;
padding:4px;
border: 1px solid black;
}
or of course you could remove padding and border altogether if you want and stay with 600px size.
Check the demo here
Related
I'm trying to understand why when I use the clear and float properties on a fourth div, it is not floating above the first element I floated. And the first three elements have floats to the left?
Also why is the .main is allowing the .aside to float underneath the second floated element? PLEASE SOMEONE HELP. (I also took a picture of it in browser view)!
.main {
background-color: #f7f4f4;
width: 600px;
padding: 20px;
margin-right: 140px;
margin-left: 20px;
box-shadow: 10px 10px 10px #705656;
border-radius: 10px;
border: 2px solid red;
float: left;
}
.shot {
border: 2px solid black;
width: 400px;
background-color: #8bed8f;
float: left;
}
.aside {
background-color: #f47575;
width: 400px;
border-radius: 4px;
margin-bottom: 20px;
float: left;
}
.trac {
border: 2px solid black;
width: 400px;
background-color: blue;
float: left;
clear: left;
}
I have an html file as inserted in the image file and i have to make the heading of it fixed and the rest table scrollable by using CSS.
I found the css to do that but my problem is that after inserting the css in html file the formatting for the header and data does not match .Suggest me whats wrong in my css my css is as following.
I want my formatting should not be disturbed only the header should be fixed up.
<style type="text/css">
div.tableContainer
{
clear: both;
border: 1px solid #963;
height: 300px;
overflow: hidden;
width: 1000px
}
html>body thead.fixedHeader tr
{
display: block
}
thead.fixedHeader th
{
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
position: relative
width: 200px
}
html>body tbody.scrollContent {
display: block;
height: 300px;
overflow: auto;
width: 100%
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
html>body thead.fixedHeader th +th {
width: 50px
}
</style>
this is the image for html file i was not able to insert the source code of it.
add margin to table like jsfiddle.net/h5t98/
table
{
margin-top: 26px;
width: 138px;
}
.month
{
width: 79px;
}
.saving
{
width:49px;
}
I have given fixed column width you can change according to your max column width.
I'm have two divs floated next to each other on one line. The first div should have a predefined length and be on the left side, and the second should elongate its length based on window size, div size, etc. on the right side. Basically two divs on the same line, one small, the other as long as possible to fit the text.
Here's what I have right now:
http://jsfiddle.net/nkuvW/
But as you can see the Thing2 is stuck on the other side, and no matter what I've tried, Thing2 will not elongate to thing1.
Here's the CSS I'm using:
#thing1 {
margin: 14px 14px 14px 43px;
padding: 4px;
width: 75px;
border: 1px solid black;
float: left;
}
#thing2 {
margin: 14px 14px 14px 43px;
padding: 4px;
border: 1px solid black;
float: right;
}
This appears to work pretty well:
#thing1 {
padding: 4px;
width: 75px;
border: 1px solid black;
float: left;
}
#thing2 {
margin-left: 100px;
padding: 4px;
border: 1px solid black;
}
JS Fiddle Demo
Try,
<div style='position:relative; padding-left:75px; background-color:red;'>
<div style='position:absolute; left:0px; top:0px; width:75px;background-color:green; border:1px solid black;'>Thing 1</div>
<div style='border:1px solid black;'>Thing 2</div>
</div>
Also see here: http://jsfiddle.net/S7zbh/5/
I have two "inline-block" buttons, see the image below:
But, if you click, you will see the other button two pixels down.
Example: http://jsfiddle.net/caio/EUjeY/.
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
}
.button:hover {
background: #e7e7e7;
}
.button:active {
border-bottom: 1px solid #ddd;
padding: 7px 10px 5px;
}
Can you help me to prevent this?
Thanks.
you can add this to your .button class:
vertical-align: top;
Working example: http://jsfiddle.net/uW7Sa/1/
Just give .button the css property float: left and both buttons will remain at the same location. This is because float: left removes the button from the flow of the document, so aside from the containing div, it isn't affected by other, inline elements:
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
float: left;
}
DEMO
I would provide more code because I'm using a float here, but I don't know what the rest of your document looks like, so I can't compensate.
Hi need a css for the following mock up
how to make border leaving 10 px on both ends on bottom,with a background fill.
For this to look right, you'll need nested div:
.inner {
margin-right: 10px;
background: #666;
border-bottom: 2px solid #000;
width: 200px;
padding-bottom: 10px;
}
.outer {
width: 200px;
border: 10px solid #666; /* your grey fill */
border-bottom: none;
}
Demonstration
Just mess with padding-top and padding-bottom on the .inner element to get the spacing you want.