I am trying to create a list that will show messages. The image below is what I wish to achive. Check the codepen for how it looks as of now!:
As you can see apart of the ui jumps up as it it utilizing float. I can't set a fixed height on the avatar red area as the message area can vary in height (basically the whole message can vary in size). I've gotten it to work by removing the float on the text-container however I'm not able to lineup the green arrow then. Any ideas?
Hree is codepen code for yous to fiddle with!
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="center">
<ol id="holder" class="scroll" style="background:pink;">
<li class="message">
<div class="thumb-fav-container">
<div class="thumb-fav-row">
<div class="thumb">
</div>
<div class="thumb-fav-num">
1000
</div>
</div>
<div class="thumb-fav-row">
<div class="fav">
</div>
<div class="thumb-fav-num">
0
</div>
</div>
</div>
<div class="message-avatar-container">
<div class="message-avatar">
</div>
</div>
<div class="text-container">
message
<br>1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
<br>6
</div>
<div class="text-arrow">
</div>
</li>
<li class="message">
<div class="thumb-fav-container">
<div class="thumb-fav-row">
<div class="thumb">
</div>
<div class="thumb-fav-num">
1000
</div>
</div>
<div class="thumb-fav-row">
<div class="fav">
</div>
<div class="thumb-fav-num">
0
</div>
</div>
</div>
<div class="message-avatar-container">
<div class="message-avatar">
</div>
</div>
<div class="text-container">
message
<br>1
<br>2
<br>3
<br>4
</div>
<div class="text-arrow">
</div>
</li>
</ol>
</div>
</body>
</html>
css:
/* Styles go here */
div.center
{
max-width: 1200px;
width: 1000px;
min-width:800px;
display: block;
margin-left: auto;
margin-right: auto;
}
ol {
list-style-type: none;
padding: 0em;
margin: 0em;
}
li {
display: inline;
margin: 0em;
padding: 0em;
left: 0em;
}
message {
background: red;
width: 100%;
height: auto;
}
div.thumb-fav-container {
margin-top: 20px;
float:left;
padding:10px;
width:70px;
background: lime;
}
div.thumb-fav-row {
height:20px;
margin-left:5px;
margin-bottom:5px;
background: silver;
}
div.thumb {
float:left;
width:20px;
height:20px;
background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
background-size: contain;
}
div.fav {
float: left;
width:20px;
height:20px;
background-image:url('https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png');
background-size: contain;
}
div.thumb-fav-num {
float: left;
margin-left:10px;
text-align: center;
background: pink;
}
div.text-container {
float:left;
margin-left:10px;
margin-top: 10px;
width:700px;
padding:20px;
background: silver;
}
div.text-arrow {
margin-top:20px;
float:left;
width: 0;
height: 0;
border-bottom: 30px solid transparent;
border-left: 30px solid lime;
border-top: 30px solid transparent;
}
div.message-avatar-container {
float:right;
padding:10px;
margin-top: 20px;
width:100px;
height:70px;
background: red;
}
div.message-avatar {
float:left;
width:50px;
height:50px;
background-image:url('http://findicons.com/files/icons/1072/face_avatars/300/a04.png');
background-size: contain;
}
Little mistake in your CSS:
Instead of:
message {
background: red;
width: 100%;
height: auto;
}
You should have:
.message {
clear:both;
float:left;
height: auto;
}
This yields the expected output (demo):
Related
I need "tumbnail.jpg" , "child.png" and "nanny.png" to be in square shape.
also "tumbnail.jpg" as a thumbnail. (It's already a thumbnail I guess)
other two I need them as just squared images side by side. Please help me with this. I tried to solve this since 4 days but I couldn't.
how should I style those 3 to be squared?
body { background-image: url( "bg.jpg" ); }
h2, p { text-align: center; }
.lulu{font-family:Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}
.parent{ background-color:lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height:200px;}
.column {
float: left;
width: 30%;
padding: 5px;
}
.child-1{
background-color:lightgray;
width:73%;
float:center;
height:900px;
text-align:center;
padding-top:50px;
padding-bottom:50px;
padding-right:50px;
padding-left:50px;
margin-left:130px;
margin-right:150px;
margin-top:80px;
margin-bottom:80px;
}
.child-1 p {
color: white;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:center;
width:80%;}
.child-2{
background-color:aliceblue;
width:300px;
float:right;
height:400px;
margin:50px;
text-align:left;
padding-left:10px;}
.child-2 p{
color: black;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:left;
width:80%;}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=styles.css>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Daycare Center</title>
</head>
<body>
<div>
<div class="parent">
<header>
<h1 class="lulu"> DAYCARE</h1>
</header>
<style>
img {
border: 1px solid #ddd;
border-radius:2px;
padding: 5px;
max-width:auto;
max-height:auto;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<img src="tumbnail.jpg" alt="kids" style="width:100px" style="height:100px">
</div>
<div>
<div class="child-1">
<h3 style="color:white;">
Child care: Making the best choice
for your family</h3>
<p>.</p>
<div class="row">
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="house.jpg" alt="house" style="width:100px" style="height:100px">
</div>
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="heart.jpg" alt="heart" style="width:100px" style="height:100px">
</div>
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="feet.jpg" alt="feet" style="width:100px" style="height:100px">
</div>
<div class="row">
<div class="column">
<img src="child.png" alt="child" style="width:100%">
</div>
<div class="column">
<img src="nanny.png" alt="nanny" style="width:100%">
</div>
</div>
<div>
<div style="position:relative; right:8px; top:90px;">
<div class="child-2">
<h3>About us:</h3>
<p>.</p>
<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<main>
<section>
</section>
</main>
</div>
</body>
</html>
It is not ideal to use several differant styling options on one page.
It is recommened that all styling is maintained seperately from your pages code.
e.g by using a css.
Using the img tag in your css will affect ALL img tags in your code.
If you want to add additional specific changes to certain images then you should add a class e.g
<img class="fill"/>
.fill {
width:100%;
height:100%;
}
SPECIFICITY
If an item in your css is after a conflicting class the subsequent one will take priority as long as the element doesn't have a more dominat identifier.
You can read more about that here: https://www.w3schools.com/css/css_specificity.asp
For this example, having .fill after img will cause this image to be width and height 100% rather than 100px
EXAMPLE
img {
background:#cdf;
width:100px;
height:100px;
}
.fill {
width:100%;
height:100%;
}
<img src="https://i.stack.imgur.com/BxBTo.png">
<img class="fill" src="https://i.stack.imgur.com/BxBTo.png">
I recommend you clear the styling from your html and add it to your css.
body {
background-image: url("bg.jpg");
}
h2,
p {
text-align: center;
}
img {
border: 1px solid #ddd;
border-radius: 2px;
padding: 5px;
height: 100px;
width: 100px;
max-width: auto;
max-height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.lulu {
font-family: Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}
.parent {
background-color: lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height: 200px;
}
.column {
float: left;
width: 30%;
padding: 5px;
}
.child-1 {
background-color: lightgray;
width: 73%;
float: center;
height: 900px;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-left: 50px;
margin-left: 130px;
margin-right: 150px;
margin-top: 80px;
margin-bottom: 80px;
}
.child-1 p {
color: white;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
text-align: center;
width: 80%;
}
.child-2 {
background-color: aliceblue;
width: 300px;
float: right;
height: 400px;
margin: 50px;
text-align: left;
padding-left: 10px;
}
.child-2 p {
color: black;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
text-align: left;
width: 80%;
}
<div>
<div class="parent">
<header>
<h1 class="lulu"> DAYCARE</h1>
</header>
<img src="tumbnail.jpg" alt="kids">
</div>
<div>
<div class="child-1">
<h3 style="color:white;">Child care: Making the best choice for your family</h3>
<p>.</p>
<div class="row">
<div class="column">
<img src="house.jpg" alt="house">
</div>
<div class="column">
<img src="heart.jpg" alt="heart">
</div>
<div class="column">
<img src="feet.jpg" alt="feet">
</div>
<div class="row">
<div class="column">
<img src="child.png" alt="child" style="width:100%">
</div>
<div class="column">
<img src="nanny.png" alt="nanny" style="width:100%">
</div>
</div>
<div>
<div>
<div class="child-2">
<h3>About us:</h3>
<p>.</p>
<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<main>
<section>
</section>
</main>
</div>
</div>
</div>
</div>
hi will be available in the shape of circle. I got the code for responsive circle with text but the problem is this hat i am not able to inline two circles in one line . I tried float:left; as well as display:inline-block; but both doesn't work for me. Display:inline-block; inline the circles but the text inside it overlaps.
THIS is my HTML:
/*------NAV--BAR--*/
* .fa-navicon{padding:8px; font-size:7vw ;}
.nav-bar{position:absolute;z-index:5;width:100%; height:100%; background:grey; padding:10px;}
.nav-bar input{ border:; outline:none; margin-left:10px;
width:70%;
}
.nav-bar input::placeholder{color:grey; margin-left:10px;}
/*--copied-code---*/
.circle {
position: relative;
display: block;
margin: 2em 0;
background-color: transparent;
color: #222;
text-align: center;
}
.circle:after {
display: block;
padding-bottom: 30%;
width: 30%;
height: 0;
border-radius: 50%;
background-color: #ddd;
content: "";
}
.circle__inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 30%;
height: %;
}
.circle__wrapper {
display: table;
width: 100%;
height: 100%;
}
.circle__content {
display: table-cell;
padding: 1em;
vertical-align: middle;
}
#media (min-width: 480px) {
.circle__content {
font-size: 2em;
}
}
#media (min-width: 768px) {
.circle__content {
font-size: 4em;
}
}
}
<div class="nav-bar">
<input type="search" placeholder="Search...">
<i class="fa fa-close " style="font-size:7vw;color:#393e41; padding:3px; vertical-align:top; "></i>
<div class="option-wrapper">
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Global</div>
</div>
</div>
</div>
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Friends</div>
</div>
</div>
</div>
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Classroom</div>
</div>
</div>
</div>
<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">Games</div>
</div>
</div>
</div>
</div>
</div>
I want two or three circles on every line depending upon the user screen size.
Sorry if i did something wrong. This is my first quest. in stackoverflow.Thnks in advance.
Check this, adjust the browser size to view the responsiveness. You can also change the circle dimensions and font size depending upon your media-size.
If you need the full site to be responsive, I suggest to implement it with the popular CSS framework "Bootstrap", its pretty easy - Bootstrap-Grid-HowItworks
.fa-navicon{padding:8px; font-size:7vw ;}
.nav-bar{position:absolute;z-index:5;width:100%; height:100%; background:grey; padding:10px;}
.nav-bar input{ border:; outline:none; margin-left:10px;
width:70%;
}
.nav-bar input::placeholder{color:grey; margin-left:10px;}
.circle-wrapper {
float: left;
margin: 10px;
}
.circle {
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: #f2f2f2;
border-spacing: 10px;
}
#media (min-width: 480px) {
.circle{
height: 150px;
width: 150px;
font-size: 30px;
}
}
#media (min-width: 768px) {
.circle {
height: 150px;
width: 150px;
font-size: 30px;
}
}
<div class="nav-bar">
<input type="search" placeholder="Search...">
<i class="fa fa-close " style="font-size:7vw;color:#393e41; padding:3px; vertical-align:top; "></i>
<div class="option-wrapper">
<div class="circle-wrapper">
<div class="circle">Global</div>
</div>
<div class="circle-wrapper">
<div class="circle">Friends</div>
</div>
<div class="circle-wrapper">
<div class="circle">Classroom</div>
</div>
<div class="circle-wrapper">
<div class="circle">Games</div>
</div>
<div class="circle-wrapper">
<div class="circle">School</div>
</div>
<div class="circle-wrapper">
<div class="circle">College</div>
</div>
</div>
</div>
How to wrap div boxes into main div along with images with responsive.?
Am trying to achieve below layout.
When i use float:left the boxes are aligned perfect where as without it if i use display inline block the boxes are not aligned as shown below.
My jfiddle
.mywrapper {
margin: 0 auto;
min-width: 320px;
max-width: 905px;
background: yellow;
}
.firstblock {
margin-top: 60px;
margin-bottom: 60px;
background: red;
//background: #2b2b2b;
padding:30px;
width:auto;
height:auto;
}
.mainimage{
width: 190px;
height: 125px;
margin-left:2%;
float:left;
padding-right:30px;
}
.smallbox{
float: left;
width: 190px;
height: 110px;
background-color: green;
margin-right:10px;
}
.secondblock {
margin-bottom: 30px;
height: 215px;
background: aqua;
padding:30px;
}
<div class="mywrapper" id="myid">
Hello
<div class="firstblock">
<div >
<img class="mainimage" src="mainimg.JPG" border="0" />
</div>
<div>
<h2 class="title"><span>MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT</span></h2>
<div class="smallbox"><img class="pcspecimg" src="box1.JPG" alt="box1.JPG" border="0" /><span>box1</span><div>MY TEXT</div></div>
<div class="smallbox"><img class="pcspecimg" src="box2.JPG" alt="box2.JPG" border="0" /><span>box2</span><div>MY TEXT MY TEXT</div></div>
<div class="smallbox"><img class="pcspecimg" src="box3.JPG" alt="box3.JPG" border="0" /><span>box3</span><div>MY TEXT MY TEXT</div></div>
</div>
</div>
<div class="secondblock">
secondblock
</div>
</div>
I think you would like this
.mywrapper {
margin: 0 auto;
min-width: 320px;
max-width: 905px;
background: yellow;
}
.firstblock {
margin-top: 60px;
margin-bottom: 60px;
background: red;
//background: #2b2b2b;
padding:30px;
width:auto;
height:auto;
}
.left-div{
float:left;
width: 27%;
height: 125px;
margin-right:2%;
border: 1px solid;
}
.right-div{
float:right;
width:70%;
}
h2{
margin-top:0;
}
.clear{
clear:both;
}
img{
height:auto;
width:auto;
max-width:100%;
max-height:100%;
}
.pcspecimg {
border: 1px solid #fff;
float: left;
height: 40px;
margin-right: 3%;
width: 27%;
}
.small-wrap {
margin-bottom: 5px;
}
.smallbox {
background-color: green;
float: left;
height: 110px;
margin-right: 1.5%;
width: 32.3%;
padding:5px;
box-sizing: border-box;
}
.smallbox:last-child{
margin-right:0;
}
.secondblock {
margin-bottom: 30px;
height: 215px;
background: aqua;
padding:30px;
}
<div class="mywrapper" id="myid">
Hello
<div class="firstblock">
<div class="left-div">
<img class="mainimage" src="mainimg.JPG" border="0" />
</div>
<div class="right-div">
<h2 class="title">
<span>MY TEXT MY TEXT</span>
</h2>
<div class="smallbox">
<div class="small-wrap">
<div class="pcspecimg">
<img src="box1.JPG" alt="box1" border="0" />
</div>
<span>box1</span>
<div class="clear"></div>
</div>
<div>MY TEXT</div>
</div>
<div class="smallbox">
<div class="small-wrap">
<div class="pcspecimg">
<img src="box1.JPG" alt="box1" border="0" />
</div>
<span>box1</span>
<div class="clear"></div>
</div>
<div>MY TEXT</div>
</div>
<div class="smallbox">
<div class="small-wrap">
<div class="pcspecimg">
<img src="box1.JPG" alt="box1" border="0" />
</div>
<span>box1</span>
<div class="clear"></div>
</div>
<div>MY TEXT</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="secondblock">
secondblock
</div>
</div>
.mywrapper {
margin: 0 auto;
min-width: 320px;
max-width: 905px;
background: yellow;
}
.firstblock {
display: flex;
flex-direction: row;
margin-top: 60px;
margin-bottom: 60px;
background: red;
//background: #2b2b2b;
padding:30px;
width:auto;
height:auto;
}
.mainimage{
width: 190px;
height: 125px;
margin-left:2%;
float:left;
padding-right:30px;
}
.smallbox{
float: left;
width: 190px;
height: 110px;
background-color: green;
margin-right:10px;
}
.secondblock {
margin-bottom: 30px;
height: 215px;
background: aqua;
padding:30px;
}
<div class="mywrapper" id="myid">
Hello
<div class="firstblock">
<div>
<img class="mainimage" src="mainimg.JPG" border="0" />
</div>
<div>
<h2 class="title"><span>MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT</span></h2>
<div class="smallbox"><img class="pcspecimg" src="box1.JPG" alt="box1.JPG" border="0" /> <span>box1</span><div>MY TEXT</div>
</div>
<div class="smallbox"><img class="pcspecimg" src="box2.JPG" alt="box2.JPG" border="0" /> <span>box2</span><div>MY TEXT MY TEXT</div>
</div>
<div class="smallbox"><img class="pcspecimg" src="box3.JPG" alt="box3.JPG" border="0" /> <span>box3</span><div>MY TEXT MY TEXT</div>
</div>
</div>
</div>
<div class="secondblock">
secondblock
</div>
</div>
Is it you want?
Can You explain detail?
I'm about to become insane with this css thing. I don't know the language very well..and can't make what I need to do.
I have this html
<div id="content">
<div id="video-content">
<div id="source">
<div id="s-video">
</div>
<div id="source-controls">
</div>
</div>
<div id="preview">
<div id="p-video">
</div>
<div id="preview-controls">
</div>
</div>
</div>
<div id="segment-content">
<ul>
<li></li>
</ul>
</div>
</div>
and I have to achieve this:
so far my css code:
body {
margin: 0;
padding: 0;
/*font-family: Helvetica, Arial, sans-serif;*/
/*color: #666;*/
background: #141414;
/*font-size: 1em;*/
/*line-height: 1.5em;*/
}
#content {
background: dimgrey;
width: 97%;
height: 90%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#video-content {
background-color: #7F7F7F;
position: fixed;
width: 300px;
z-index: 20;
}
#segment-content {
background-color: #7F7F7F;
position: fixed;
width: 300px;
}
I am not interested in doing this resposive so far
To get a clean grid you'll have to change your html-structure a little bit.
<div id="content">
<div id="video-content">
<div class="row">
<div class="col-1-2">
<div id="source"></div>
<div id="s-video">
</div>
<div id="source-controls">
</div>
</div>
<div class="col-1-2">
<div id="preview">
<div id="p-video">
</div>
<div id="preview-controls">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-1-1">
<div id="segment-content">
</div>
</div>
</div>
</div>
Here's an example I made of how to achieve something similar to your screenshot:
Codepen example
You want to switch out the height-properties or remove them completly and let the content fill in dynamically. I used them in this example since we have no content, so that the divs become visible.
body {
margin: 0;
padding: 0;
/*font-family: Helvetica, Arial, sans-serif;*/
/*color: #666;*/
background: #141414;
height:auto;
/*font-size: 1em;*/
/*line-height: 1.5em;*/
}
#content{width:100%;
height:auto;
background: dimgrey;}
#video-content{width:80%;
height:370px;
margin:0 auto;}
#source{width:45%;
float:left;
height:auto;
}
#preview{width:45%;
float:left;
height:auto;
margin-left:10%;
}
#s-video{width:100%;
height:300px;
background-color:black;}
#p-video{width:100%;
height:300px;
background-color:black;}
#source-controls{width:100%;
height:50px;
background:red;
margin-top:20px;}
#preview-controls{width:100%;
height:50px;
background:red;
margin-top:20px;}
#segment-content:after {
content: "";
display: table;
clear: both;}
#segment-content{width:80%;
margin: 20px auto;
height:300px;
background:blue;}
this will work,although not the pretty way of writing css
I think you'd be much better off going with a pre-built framework if that's an option. Something like purecss.io or bootstrap. But this should also work for what you want.
https://jsfiddle.net/w5qfvezg/
.video-display {
background-color: black;
min-height: 200px;
}
.video-description {
background-color: red;
min-height: 50px;
}
body {
padding: 5%;
padding-left: 10%;
padding-right: 10%;
background-color: #999;
}
.video-item {
width: 49%;
float: left;
margin-bottom: 20px;
}
.video-spacer {
width: 2%;
float: left;
min-height: 200px;
}
#segment-content {
background-color: blue;
min-height: 200px;
}
<body>
<div id='video-content'>
<div class='video-item' id='source'>
<div class='video-display' id="s-video">
</div>
<div class='video-description' id="source-controls">
</div>
</div>
<div class='video-spacer'>
</div>
<div class='video-item' id='preview'>
<div class='video-display' id='p-video'>
</div>
<div class='video-description' id="preview-controls">
</div>
</div>
</div>
<div style='clear:both'>
</div>
<div id="segment-content">
<ul>
<li></li>
</ul>
</div>
</body>
I have a question regarding HTML tables. I created HTML table using Divs. Some cells contain images so they have fixed size. The bottom cell is resizable according to data filled in other box. So, I don't want to use absolute option in this solute. Here's my code:
<!DOCTYPE html>
<html>
<header>
<style type="text/css">
object
{
outline: none;
display:block;
}
html, body {
margin:0; padding:0;
height:100%;
}
.divTable
{
width: 135px;
height: 100%;
display: table;
float:left;
background-color:blue;
}
.newDiv{
position: relative;
left:135px;
height:100%;
width:100%;
display: block;
background-color:yellow;
border:1px solid #BBBDBF;
border-left:0px;
}
.divTableRow
{
width: 135px;
height: 30px;
display: table-row;
}
.divTableCell
{
width: 135px;
height: 30px;
background: white url('Images/bottom_up.png') 0 0 no-repeat;
display: table-cell;
text-align:center;
vertical-align:middle;
}
.divTableTopCell
{
width: 135px;
height: 30px;
background: white url('Images/top_up.png') 0 0 no-repeat;
display: table-cell;
text-align: center;
border-bottom:1px solid #848385;
vertical-align:middle;
}
.divTableBottomBox
{
position:relative;
width: 133px;
height: 100%;
background-color: #d0d2d3;
display: block;
border:1px solid #BBBDBF;
clear:both;
}
.divParent{
position: relative;
display:block;
min-height:700px;
min-width:700px;
}
</style>
</header>
<body>
<div class='divParent'>
<div class="divTable">
<div class="divTableRow">
<div id = 'accountDetails' class="divTableTopCell">
Account Details
</div>
</div>
<div class="divTableRow">
<div id = 'locations' class="divTableCell">
Locations
</div>
</div>
<div class="divTableRow">
<div id = 'users' class="divTableCell">
Users
</div>
</div>
<div class="divTableRow">
<div id = 'training' class="divTableCell">
Training
</div>
</div>
<div class="divTableRow">
<div id = 'contracts' class="divTableCell">
Contracts
</div>
</div>
<div class='divTableBottomBox'>
</div>
</div>
<div class='newDiv'>
Helllo <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</body>
</html>
Any help would be appreciated.
By the looks of it, you are marking up tabular data. If you have tabular table, it is semantically correct to use an actual HTML table. You shouldn’t try to fake it with divs. They're less suited for the task and are semantically invalid.
Thank you for the response. I fixed it.
Here's the solution:
<!DOCTYPE html>
<html>
<header>
<style type="text/css">
object
{
outline: none;
display:block;
}
html, body {
margin:0; padding:0;
height:100%;
}
.divLeftContainer{
min-height:100%;
height:100%;
display:block;
background-color:red;
float:left;
}
.divTable
{
float:left;
width: 135px;
height: auto;
display: table;
background-color:blue;
}
.newDiv{
position: relative;
left:135px;
height:100%;
width:100%;
display: block;
background-color:yellow;
border:1px solid #BBBDBF;
border-left:0px;
}
.divTableRow
{
width: 135px;
height: 100%;
display: table-row;
border:0px;
}
.divTableCell
{
width: 135px;
height: 30px;
background: white url('Images/bottom_up.png') 0 0 no-repeat;
display: table-cell;
text-align:center;
vertical-align:middle;
}
.divTableTopCell
{
width: 135px;
height: 30px;
background: white url('Images/top_up.png') 0 0 no-repeat;
display: table-cell;
text-align: center;
border-bottom:1px solid #848385;
vertical-align:middle;
}
.divTableBottomBox
{
width: 133px;
display:block;
height:100%;
background-color: #d0d2d3;
border:1px solid #BBBDBF;
border-top:0px;
margin-bottom:0px;
bottom:0px;
}
.divParent{
position: relative;
display:block;
height:700px;
min-height:700px;
min-width:700px;
}
</style>
</header>
<body>
<div class='divParent'>
<div class='divLeftContainer'>
<div class="divTable">
<div class="divTableRow">
<div id = 'accountDetails' class="divTableTopCell">
Account Details
</div>
</div>
<div class="divTableRow">
<div id = 'locations' class="divTableCell">
Locations
</div>
</div>
<div class="divTableRow">
<div id = 'users' class="divTableCell">
Users
</div>
</div>
<div class="divTableRow">
<div id = 'training' class="divTableCell">
Training
</div>
</div>
<div class="divTableRow">
<div id = 'contracts' class="divTableCell">
Contracts
</div>
</div>
</div>
<div class='divTableBottomBox'>
</div>
</div>
<div class='newDiv'>
Helllo <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</body>
</html>