How do I align these two both at the top of the div or just get rid of the space at the bottom of the canvas?
<style>
html, body, div, canvas {
margin: 0;
padding: 0;
}
</style>
<div style="border: solid 1px Grey;">
<a style="border: solid 1px Grey">Test</a>
<canvas style="border: solid 1px Grey;width:30px;height: 30px"></canvas>
</div>
<html>
<head>
<title>Test</title>
<style>
.Left {
float: left;
border: 1px solid red;
width: 30px;
}
.Right {
float: left;
border: 1px solid green;
width: 35px;
}
.Outer {
border: solid 1px Grey;
height: 50px;
width: 100%;
}
</style>
</head>
<body>
<div class="Outer">
<div class="Left"><a style="border: solid 1px Grey">Test</a></div>
<div class="Right">
<canvas style="border: solid 1px Grey;width:30px;height:30px">
<!--Your Canvas-->
</canvas>
</div>
</div>
</body>
</html>
Related
The page looks as expected on desktop browsers e.g. Firefox, etc. The problem is with display on mobile devices.
When displayed correctly, the dark background of the "BODY" of the page should appear only as a thin frame, with the white background of the "mainFrame" div appearing as central with all contents inside it.
I have tied to change the width of the "mainFrame" class to 100% but it didn't help.
What changes should be made to the css to allow correct display on not desktop and mobile devices browsers?
Please see the CSS and HTML below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir='ltr'>
<head>
<style>
html, body{height:100%;text-align: center;background:#646464;}
body{padding:0px;margin:0px; text-align: center;}
.mainFrame{
width: auto;
min-height:100%;
height: 100%;
background: white;
border: 5px solid #CCCCCC;
margin:auto;
}
html>body .mainFrame {width:auto; height: auto;}
th{
text-align: center;
padding: 9px 0px 9px 0px;
background: #E8E8FF;
font: bold 12px TAHOMA;
color: #404040;
}
td {
font: 11px Tahoma;
background: #DFEFFF;
padding: 8px 5px 8px 3px;
}
td.blank{
padding: 12px 0px;
background: WHITE;
}
.logosmallContainer {
position: relative;
width: 960px;
top: 22px;
}
.logosmallContainer1 {
position: relative;
width: 720px;
top: 22px;
}
.logosmall {
float:right;
}
.jobtabs{
position: relative;
top:40px;
width: 720px;
}
.upperTabs{
position: relative;
font-size: 12px;
width: 720px;
clear:both;
}
.uprTabs {
width:120px;
text-align:center;
padding:0px;
font: 12px tahoma;
float:right;
}
.uprTabs a {
width:120px;
height: 30px;
line-height:30px;
background-color: #EEEEEE;
text-decoration: none;
border-top: 1px #F5F5F5 solid;
border-left: 1px #F5F5F5 solid;
border-bottom: 1px #F5F5F5 solid;
border-right: 1px #F5F5F5 solid;
}
html>body .uprTabs a {width:118px; display:table; }
.uprTabs a:hover{
background-color: #C3E2DB;
text-decoration: none;
border-top: 1px solid #31557f;
border-left: 1px solid #31557f;
border-bottom: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
}
.lowerTabs{
position: relative;
font-size: 12px;
width: 720px;
border-top: solid #007FC0 5px;
clear:both;
}
html>body .lowrTabs a {width:118px; display:table;}
.lowrTabs {
width:120px;
background-color: #EEEEEE;
text-decoration: none;
text-align:center;
font: 12px tahoma;
float:right;
height: 27px;
line-height:27px;
}
.lowrTabs a {
width:120px;
height: 25px;
line-height:25px;
background-color: #EEEEEE;
text-decoration: none;
border-top: 1px #F5F5F5 solid;
border-left: 1px #F5F5F5 solid;
border-bottom: 1px #F5F5F5 solid;
border-right: 1px #F5F5F5 solid;
float:right;
}
.lowrTabs a:hover{
background-color: #C3E2DB;
text-decoration: none;
border-top: 1px #31557f solid;
border-left: 1px #31557f solid;
border-bottom: 1px #E6E6E6 solid;
border-right: 1px #E6E6E6 solid;
}
.vMsg2 {
font: bold 22px arial;
position: relative;
top: 78px;
width: 720px;
text-align: center;
direction:rtl;
clear:both;
}
.vMain {
position: relative;
top: 113px;
width:620px;
direction:rtl;
clear:both;
}
.vMainJobs {
position: relative;
top: 30px;
width:620px;
direction:rtl;
clear:both;
}
.pgn1 {
width: 330px;
top:30px;
position: relative;
}
html>body .pgn1 {display:table;}
.pgnbx {
width: 30px;
height: 20px;
line-height:20px;
float:right;
text-decoration: none;
text-align:center;
}
html>body .pgnbx a {display:table;}
.pgnbx a{
width: 30px;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
background: #FFF;
background: #CDF6ED;
}
.pgnbx a:hover{
width: 30px;
background: #B3E1D7;
border-color: #fff #ccc;
text-decoration: none;
}
.mainXJobs {
height:55px;
clear:both;
}
.ad728Y{
position: relative;
width:728px;
border-top: double thick #D3D3D3;
border-bottom: double thick #D3D3D3;
}
</style>
</head>
<body topmargin='0' leftmargin='0' >
<div class="mainFrame" align="center">
<div class="logosmallContainer1">
<div class="logosmall"><img border="0" src="media/small.jpg" alt="logo"></div>
<DIV class=adtop2>
</div>
</div>
<div class="jobtabs">
<div class="upperTabs">
<DIV class=uprTabs><A href="?Category6">Category 6</DIV>
<DIV class=uprTabs>Category 5</DIV>
<DIV class=uprTabs>Category 4</DIV>
<DIV class=uprTabs>Category 3</DIV>
<DIV class=uprTabs> Category 2</DIV>
<DIV class=uprTabs>Category 1</DIV>
</div>
<div class ="lowerTabs">
<DIV class=lowrTabs>Category 7</DIV>
<DIV class=lowrTabs>Category 8</DIV>
<DIV class=lowrTabs>Category 9</DIV>
<DIV class=lowrTabs>Category 10</DIV>
<DIV class=lowrTabs> Category 11</DIV>
<DIV class=lowrTabs>Category 12</DIV>
</div>
</div>
<div class='vMsg2'><H1>
GENERAL LIST
</H1></div>
<br><br><br><br><br><div class="ad300" id="ad"></div><div class='vMainJobs' dir='ltr'> <table border='0' width='100%' dir='ltr' cellspacing='1'>
<tr>
<th width='100%' colspan='2'>DETAILS</th>
</tr>
<tr>
<td width='18%'height='18' valign='top'>LOCATION </td>
<td height='18'>LONDON</td>
</tr>
<tr>
<td width='18%'height='18' valign='top'>LINK</td>
<td height='18'><a href='https://www.example.com'>https://www.example.com</a></td>
</tr>
</table>
<table border='0'>
<tr>
<td class='blank'>
<a href='#top'>top of page</a>
</td>
</tr>
</table>
</div>
<div class="pgn1">
<div class='pgnbx'>
<a href='?jpage=2'>2</a>
</div>
<div class='pgnbx'>
<a href='?page=3'>3</a>
</div>
<div class='pgnbx'>
<a href='?jpage=4'>4</a>
</div>
<div class='pgnbx'>
<a href='?page=5'>5</a>
</div>
<div class='pgnbx'>
<a href='?jpage=6'>6</a>
</div>
<div class='pgnbx'>
<a href='?page=7'>7</a>
</div>
<div class='pgnbx'>
<a href='?jpage=8'>8</a>
</div>
<div class='pgnbx'>
<a href='?page=9'>9</a>
</div>
<div class='pgnbx'>
<a href='?page=10'>10</a>
</div>
<div class='pgnbx'>
<a href='?jpage=11'>11</a>
</div>
<div class='pgnbx'>
<a href='?page=12'>12</a>
</div>
</div>
<div class="mainXJobs"> </div>
<DIV class="ad728Y"> PUT item "Classicus" here HERE</DIV>
<br><br><br>
</div>
</body>
</font>
</html>
The reason your body does not adjust is because you are assigning width using px. Try to change it to "%" or "vw". You can always assign a max-width or min-width if you want to put a limit on how much you want the width to be.
If you need to have the children adjust to the parent container, assign the width: 100%.
You have to use media query for mobile devices.
For example if I want to add background color for the device of maximum 600px, it will show body background color as
lightblue
after 600px it will be the default.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
HTML:
<!-- start setup section -->
<div class='photo-setup'>
<div class='setup-head'>
<div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
<div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
</div>
<div class='photo-section'>
<img src='' width='600' height='600' alt='photo'>
</div>
<div class='tag-section'>
Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
</div>
<div class='commit-section'>
<a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
</div>
</div>
<!-- end setup section-->
CSS:
img { border: none; }
.photo-setup {
width: 600px;
height: auto;
margin: 0 auto;
}
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
}
.photo-name { float: left; }
.photo-date { float: right; }
.photo-section {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
}
Result: https://jsfiddle.net/rw5beqtk/
Question 1: Why is the top and bottom padding in setup-head not the same?
Question 2: Why is the border of photo-section not the same as setup-head?
Question 1: Why is the top and bottom padding in setup-head not the
same?
Because your child element is floated and as such taken out of the normal flow. Setting overflow:hidden on setup-head will fix that.
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
overflow: hidden;
}
Question 2: Why is the border of photo-section not the same as
setup-head?
It is the photo-section's img child's border, so you get double. When an img element doesn't have a valid src, it gets a border representing the image size, which won't go away with border: none.
Sample snippet with an image and overflow: hidden
img {
border: none;
vertical-align: top;
}
.photo-setup {
width: 600px;
height: auto;
margin: 0 auto;
}
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
overflow: hidden;
}
.photo-name { float: left; }
.photo-date { float: right; }
.photo-section {
border: 1px solid #cacece;
overflow: hidden;
}
<div class='photo-setup'>
<div class='setup-head'>
<div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
<div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
</div>
<div class='photo-section'>
<img src='http://placehold.it/600/eee' width='600' height='600' alt='photo'>
</div>
<div class='tag-section'>
Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
</div>
<div class='commit-section'>
<a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
</div>
</div>
Questions 1:
You have a float left and float right on photo-name and photo-date as such taken out of the normal flow, you have to add overflow:auto to the parent class so it does not lose its padding state.
img { border: none; }
.photo-setup {
width: 600px;
height: auto;
margin: 0 auto;
}
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
overflow: auto;
}
.photo-name { float: left; }
.photo-date { float: right; }
.photo-section {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
}
<!-- start setup section -->
<div class='photo-setup'>
<div class='setup-head'>
<div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
<div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
</div>
<div class='photo-section'>
<img src='' width='600' height='600' alt='photo'>
</div>
<div class='tag-section'>
Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
</div>
<div class='commit-section'>
<a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
</div>
</div>
<!-- end setup section-->
Question 2: It is the img childs border which the browser adds to it if there is not a src for it and can not be overridden. Easy fix for you though is to remove (as you already have a border round the image)
.photo-section {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
}
from your code
img { border: none; }
.photo-setup {
width: 600px;
height: auto;
margin: 0 auto;
}
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
overflow: auto;
}
.photo-name { float: left; }
.photo-date { float: right; }
<!-- start setup section -->
<div class='photo-setup'>
<div class='setup-head'>
<div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
<div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
</div>
<div class='photo-section'>
<img src='' width='600' height='600' alt='photo'>
</div>
<div class='tag-section'>
Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
</div>
<div class='commit-section'>
<a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
</div>
</div>
<!-- end setup section-->
Add overflow: hidden; to .setup-head or clear your floats.
They are the same. You see a 2px border because the image is missing.
i am try css to display div in line
this is my html
<body>
<div id="main">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
<div id="main_new">
<div id="div1_new">div1_new</div>
<div id="div2_new">div2_new</div>
</div>
</body>
this is my css
#div1{
border: solid 1px #000000;
background-color: #0066CC;
float: left;
}
#div2{
border: solid 1px #000000;
background-color: #66CC00;
float: right;
}
JSfiddle
here i am set only first div sub two div in one line
but i want to set another two div same as this
div1_new is in below on div1
div2_new is in below on div2
thanks.
Try this fiddle
http://jsfiddle.net/J7mJX/47/
You need to apply a clearfix
.clearfix:after {
content: "";
display: table;
clear: both;
}
CSS for your html:
#div1, #div1_new {
border: solid 1px #000000;
background-color: #0066CC;
float: left;
}
#div2, #div2_new {
border: solid 1px #000000;
background-color: #66CC00;
float: right;
}
#main, #main_new {
overflow:hidden;
}
I think this is what you want.
Changed the id names to classes instead. I also put a br tag to separate the divs!
<body>
<div id="main">
<div class="divs1">div1</div>
<div class="divs1">div2</div>
</div>
<br/>
<div id="main_new">
<div class="divs2">div1_new</div>
<div class="divs2">div2_new</div>
</div>
</body>
(display:inline-block; is the code you probably were missing)
And here's the adjusted Css:
.divs1{
border: solid 1px #000000;
background-color: #0066CC;
width:70px;
display:inline-block;
}
.divs2{
border: solid 1px #000000;
background-color: #66CC00;
width:70px;
display:inline-block;
}
Here's a fiddle link to help:
http://jsfiddle.net/Anicefry/t3Lmw/
Is that what you want? http://jsfiddle.net/ugktn/
<body>
<div id="left-col">
<div>div1</div>
<div>div1_new</div>
</div>
<div id="right-col">
<div>div2</div>
<div>div2_new</div>
</div>
<div id="main_new">
middle text
</div>
</body>
Css:
body{
margin: 0;
}
#left-col{
border: solid 1px #000000;
background-color: #0066CC;
float: left;
}
#right-col{
border: solid 1px #000000;
background-color: #66CC00;
float: right;
}
Specify your desired width for all div.Include this in all
width:100px;
float:left;
Try to use less divs :-)
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bla! </title>
<style type='text/css'>
div {width:50%; float:left}
div.divRed { background-color:red; }
div.divGreen { background-color:Green; }
</style>
</head>
<body >
<div class='divRed'> div1 </div>
<div class='divGreen'> div2 </div>
<div class='divGreen'> div1 new </div>
<div class='divRed'> div2 new </div>
</body>
</html>
Add a <div style="clear:both;"></div> before first container ends
DEMO
#main {
width:50%;
float:left;
}
#main_new {
width:50%;
float:right;
}
#div1{
border: solid 1px #000000;
background-color: #0066CC;
}
#div2{
border: solid 1px #000000;
background-color: #66CC00;
}
#div1_new{
border: solid 1px #000000;
background-color: red;
}
#div2_new{
border: solid 1px #000000;
background-color: yellow;
}
If you don't want to change your actual code and use css calculation do this in your css:
body{
margin: 0;
}
#main{
border: solid 1px #000000;
background-color: #0066CC;
float: left;
}
#main_new{
border: solid 1px #000000;
background-color: #66CC00;
float: right;
}
http://jsfiddle.net/J7mJX/51/
or if you want them side by side add a width to the body:
body{
margin: 0;
width: 113px;
}
#main{
border: solid 1px #000000;
background-color: #0066CC;
float: left;
}
#main_new{
border: solid 1px #000000;
background-color: #66CC00;
float: right;
}
http://jsfiddle.net/J7mJX/52/
Html:
<div id="main-div">
<div style="float:left">div1</div>
<div style="float:right">div2</div>
<div style="clear:both"></div>
</div>
<div id="main-div1">
<div style="float:left">div3</div>
<div style="float:right">div4</div>
<div style="clear:both"></div>
</div>
Css:
#main-div,.main-div1{
width:90px;
}
This should be an easy one for someone. I am creating tabs with CSS (please, I don't need suggestions for how to make them look better, this is what my customer wants). As you can see in the image below, my tabs and my "tab bar" don't line up. I do not know why.
The HTML:
<html>
<head>
<link rel="stylesheet" href="prototype.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="content">
<div id="tabs">
<span id="tab0" class="tab">
No Circuit
</span>
<span id="tab1" class="tab">
Digital Inputs
</span>
</div>
</div>
</div>
</body>
<html>
The CSS:
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: float;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
position: relative;
width: 868px;
}
#tabs {
border-top: 1px solid black;
width: 100%;
}
.tab {
border: 1px solid black;
margin-left: 5px;
margin-top: 2px;
padding: 3px;
}
I appreciate any help.
Try: http://jsfiddle.net/dYz9k/1/
.tab {
border: 1px solid black;
border-top: 0;
margin-left: 5px;
padding: 3px;
display: inline-block
}
I set display: inline-block, and removed the margin-top and border-top.
display: inline-block allows the padding to work as you're expecting.
Hm..not 100% certain if that'a what you're asking, but try setting padding:0 on .tab class
Have you considered using a list, better for Accessibility
Example here http://jsfiddle.net/hdhkn/
HTML
<html>
<head>
</head>
<body>
<div id="container">
<div id="content">
<ul id="tabs">
<li id="tab0" class="tab">
No Circuit
</li>
<li id="tab1" class="tab">
Digital Inputs
</li>
</ul>
</div>
</div>
</body>
<html>
CSS
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: float;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
position: relative;
width: 868px;
}
#tabs {
border-top: 1px solid black;
width: 100%;
list-style:none;
height:40px;
}
.tab {
border: 1px solid black;
border-top:none;
margin-left: 5px;
padding: 3px;
float:left;
display:block;
}
Is this what you want to accomplish? Or do you want your tabs(.tab) to be on top of #tabs?
I've added overflow: hidden to #tabs and changed the margin-left to margin-right.
You're putting padding on inline elements (the tabs), that always causes unexpected results.
Cleaned it up a bit for you.
<html>
<head>
<style type="text/css">
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
width: 868px;
}
#tabs {
border-bottom: 1px solid black;
width: 100%;
}
.tab {
border: 1px solid black;
border-bottom:0px solid black;
margin-left: 5px;
margin-top: 2px;
padding: 3px;
float:left;
}
.clear {
display:block;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="tabs">
<span id="tab0" class="tab">
No Circuit
</span>
<span id="tab1" class="tab">
Digital Inputs
</span>
<span class="clear"></span>
</div>
</div>
</div>
</body>
<html>
I have a simple page for a chat system.
Test page can be found here: http://komasurfer.com/chat-test/
Here's the code:
<html>
<head>
<style type="text/css">
#page-wrap {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
/*for sidebar*/
margin-right: -110px;
background-color: #AAAAFF;
}
#chat-wrap {
border: 1px solid #eee;
margin: 0 5px 10px 0;
float: left;
/*margin for sidebar*/
margin-right:115px;
border: 1px solid red;
background-color: #600000; }
#chat-area {
width:100%;
height: 400px;
border: 1px solid #666;
float: left;
}
#sidebar {
border: 1px solid green;
float: right;
width: 110px;
padding: 0px 0px 0px 5px;
}
#entry {
background-color: #ffffff;
padding: 5px;
font-size: 1em;
clear: both;
border: 3px solid #999;
height: 40px;
width: 97%; }
#entry-btn {
padding: 18px;
float: right; }
.left {float: left; }
.right {float: right; }
.c {clear: both; }
</style>
</head>
<body>
<div id="page-wrap">
<div id="sidebar">
SIDEBAR
</div>
<div id="chat-wrap">
<div id="chat-area">
<div id="loading">connecting to server...</div>
</div>
</div>
<div class="c"></div>
<form id="send-message-area">
<div>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody><tr><td align="left" width="98%" style="padding-right:5px;">
<textarea tabindex="1" maxlength="2000" id="entry"></textarea>
</td><td align="right">
<input id="entry-btn" type="button" value="Send">
</td></tr></tbody></table>
</div>
</form>
</div>
</body>
</html>
I've been trying for a very long time now to get the red box (with the contents of the chat) to expand to the sidebar.
If I add a width of 100% to that box, it always disregards the margin that I set for the sidebar and expands to the width of the container box.
How can I make the red chat area expand to the sidebar (minus a safety margin of 5 pixels)?
The layout is a floating one, so I cannot work with absolute measurements. And the sidebar should be 110 pixels.
Remove float:left from chat-wrap and increase the right margin like this:
#chat-wrap {
background-color: #600000;
border: 1px solid red;
margin: 0 136px 10px 0;
}