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;
}
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;
}
}
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>
Please find below fiddle what i tried
http://jsfiddle.net/9LdEc/
code:
html:
<div id="CorpDealerSearch">
<div class="row">
<div class="left">
Quarter To Date
</div>
<div class="left">
914
</div>
<div class="left">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACoSURBVFhH7dkhDoMwFIfxJ5EcieNwG5IZJJY7IDhCBTeYm0JCgviTEJaxAUnfbL8mdVVffn0VNTMT+7KBifVdYIdCmF8YhLm5KoQhjG+KIgYxiPEVQIyvFzMGMdI4ztuOWUmJaZpBef5QllUqilZl2SmE12WnpMK8C0zTor5/qq4DYWKuz/FMkmJiIhGGVynGyecMYhCDGF8BxPh6MWMQ86cY/pXO/0or0qcGh0OW3F8AAAAASUVORK5CYII=">
</div>
<div class="left">
<span>OFF TIER2</span>
</div>
</div>
</div>
css:
#CorpDealerSearch{
display:table;
padding : 5px;
border: 2px solid gray;
border-radius:3px;
}
.row{
display:table-row;
}
.left {
display:table-cell;
display:inline-block;
padding:5px;
}
But I want the design like the screenshot below. How can I modify the fiddle to get the design like this?
I need to do changes only for the last cell.
I have updated your fiddle:
http://jsfiddle.net/9LdEc/4/
I have added some of classes to your html and used the following css:
body {
font-family: Arial;
}
#CorpDealerSearch {
display:table;
padding : 5px;
border: 2px solid gray;
border-radius:5px;
vertical-align: middle;
line-height: 25px;
}
#CorpDealerSearch a,
#CorpDealerSearch a:hover,
#CorpDealerSearch a:visited {
color: red;
font-weight: bold;
}
.row {
display:table-cell;
vertical-align: middle;
}
.left {
display:table-cell;
display:inline-block;
padding-left:5px;
padding-right: 5px;
}
.tier {
border-left: 2px dotted black;
background-color: lightgreen;
}
Is this what you wanted?
I want to create a table grid using DIV (HTML & CSS only). I almost got into and still got some issues. I attached the sample image. I want the grid should be the same like this sample image. I attached the fiddle of what I created so far. Could you help somebody that what am doing and how can I improve to finish the table as same as the image?
HTML:
<div class="containerDiv">
<div class="rowDivHeader">
<div class="cellDivHeader">Recommendation</div>
<div class="cellDivHeader">Typical savings</div>
<div class="cellDivHeader">Improved SAP</div>
<div class="cellDivHeader">Improved EI</div>
<div class="cellDivHeader">Indicative cost</div>
<div class="cellDivHeader">Include</div>
<div class="cellDivHeader lastCell">Removal Reason</div>
</div>
<div class="rowDiv">
<div class="cellDiv">Room-in-roof-insulation</div>
<div class="cellDiv">93.0</div>
<div class="cellDiv">F : 29</div>
<div class="cellDiv">B : 89</div>
<div class="cellDiv">£1,500 - £2,700</div>
<div class="cellDiv">Checkbox</div>
<div class="cellDiv lastCell">Textbox</div>
</div>
</div>
CSS:
.containerDiv {
border: 1px solid #3697f6;
width: 100%;
}
.rowDivHeader {
border: 1px solid #668db6;
background-color: #336799;
color: white;
font-weight: bold;
}
.rowDiv {
border: 1px solid #668db6;
background-color: #cee6fe;
}
.cellDivHeader {
border-right: 1px solid white;
display: table-cell;
width:12%;
padding: 1px;
text-align: center;
}
.cellDiv {
border-right: 2px solid white;
display: table-cell;
width:10%;
padding-right: 4px;
text-align: center;
border-bottom: none;
}
.lastCell {
border-right: none;
}
sample image
Add display:table-row to the row div i.e .rowDivHeader & .rowDiv
& display:table to the main div .containerDiv
.containerDiv {
border: 1px solid #3697f6;
width: 100%; display:table
}
.rowDivHeader {
border: 1px solid #668db6;
background-color: #336799;
color: white;
font-weight: bold; display:table-row
}
.rowDiv {
border: 1px solid #668db6;
background-color: #cee6fe;
display:table-row
}
DEMO
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>