Responsive Design on a specific html website for any device

Responsive Design on a specific html website for any device - html

Hi i'm a begginer at html and css and i know my code is really bad. I want to make my website visitable on any device here's a demo. I can't figure out how to do the responsive design i can't get it to work. here's the site.View it in light mode because some pictures are not transparent. http://computerstoremk.000webhostapp.com/
Here's all the html and css code.
Sorry for the mess. If anyone could tell me how to scale it down when sizing down the browser size so it could be readable on any device let me know. If you can find the simplest ways it would be nice.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Computer Store MK</title>
</head>
<body>
<section class="section">
<nav id="nav">
<div>
<ul>
<li>Home</li>
<li>Shops</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<h3>PC Configurations</h3>
<p id="store">Computer Store MK</p>
</nav>
<br>
<br>
<br>
<br>
<br>
<h2>Personal Computers</h2>
<br>
<br>
<br>
<br>
<br>
<img src="https://www.pbtech.co.nz/imgprod/W/K/WKSGGPC51151__1.jpg" id="PC1">
<p id="pc1spec"><b>Titan Gaming PC</b> <br>Specs:<br>Ryzen 5 5600x<br>GTX 1080 TI<br>16 GB DDR4 2666mhz Ram</p>
<img src="https://vrlatech.com/wp-content/uploads/2019/11/Helios.png" id="PC2">
<p id="pc2spec"><b>Helios Gaming PC</b><br>Specs:<br>Intel Core I7 10700K<br>GTX 1080<br>16GB DDR4 3200mhz Ram</p>
<img src="https://plecom.imgix.net/iil-259648-646963.jpg?auto=format&w=600&h=600" id="PC3">
<p id="pc3spec"><b>Corssair</b><br>Specs:<br>Ryzen 7 5800x<br>Radeon RX 6700XT<br>24GB DDR4 4000mhz Ram</p>
Order Now
Order Now
Order Now
<img src="https://www.corsair.com/medias/sys_master/images/images/h3e/h94/9618136924190/CS-9050008-NA/Gallery/Vengeance_A7200_01/-CS-9050008-NA-Gallery-Vengeance-A7200-01.png_515Wx515H" id="PC4">
<p id="pc4spec"><b>Vengeance Gaming PC</b><br>Specs:<br>RTX 2080 SUPER<br>Intel Core I9 10900K<br>32GB DDR4 3600mhz Ram</p>
Order Now
Order Now
Order Now
<img src="https://www.pcdiy.com.au/wp-content/uploads/2021/03/asus_tuf_gaming_gt301_rgb_tempered_glass_midtower_atx_case_ac34039-600x600-1.jpg" id="PC5">
<p id="pc5spec"><b>Cezzane Gaming Pc</b><br>Specs:<br>Radeon 6600 XT<br>Intel Core I7 11700K<br>24GB DDR4 3200mhz Ram</p>
<img src="https://www.cclonline.com/images/avante/ccl-horizon-cit-flash-main-image.jpg?width=600&height=600&scale=canvas" id="PC6">
<p id="pc6spec"><b>Horizon Gaming PC</b><br>Specs:<br>RTX 3060 TI<br>Ryzen 9 3650x<br>64GB DDR4 4000mhz Ram</p>
</section>
</body>
</html>
#import url('http://fonts.cdnfonts.com/css/segoe-ui-variable');
*{
margin: 0 ;
padding: 0;
}
html,body {
width: 100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body{
font-family: 'Segoe UI Variable', sans-serif;
background-color: white;
}
.home{
text-decoration: none;
color: white;
}
.home:hover{
transition: 1s;
text-shadow: 3px 3px red;
}
header{
background-size: cover;
background-position: center;
z-index: 1;
}
h2{
padding: 0px 790px;
font-size: 30px;
font-weight: bolder;
color: #2f3638;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
nav{
width: 100%;
height: 75px;
background-color: #273a63;
line-height: 75px;
padding: 0px -15px;
}
h3 {
float: left;
left: 30px;
color: white;
font-size: 30px;
color: #e0dfdc;
position: relative;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: #Fff;
font-size: 18px;
text-transform: uppercase;
padding: 0px 32px;
}
#PC1{
width: 400px;
height: 400px;
position: relative;
padding: 0px 150px;
}
#pc1spec{
padding: 0px 270px;
font-size: 25px;
}
#PC2{
width: 400px;
height: 400px;
padding: 0px 725px;
position: relative;
top: -570px;
}
#pc2spec{
padding: 0px 820px;
top: -590px;
position: relative;
font-size: 25px;
}
#PC3{
width: 400px;
height: 400px;
padding: 0px 1300px;
top: -1200px;
position: relative;
}
#pc3spec{
position: relative;
font-size: 25px;
left: -200px;
top: -1205px;
float: Right;
}
#section{
position: relative;
padding: 0px 250px;
}
#Order1{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
margin: 280px;
border-radius: 50px;;
position: relative;
top: -970px;
}
#Order1:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#Order2{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
margin: 125px;
border-radius: 50px;;
position: relative;
top: -970px;
}
#Order2:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#Order3{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
float: right;
border-radius: 50px;;
position: relative;
left: -10px;
top: -982px;
}
#Order3:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#store{
font-size: 30px;
font-weight: bolder;
position: relative;
float: right;
top: 0px;
right: 352px;
color: whitesmoke;
}
#PC4{
position: relative;
width: 400px;
height: 400px;
top: -750px;
padding: 0px 150px;
}
#pc4spec{
position: relative;
font-size: 25px;
padding: 0px 235px;
top: -740px;
}
#PC5{
position: relative;
padding: 0px 215px;
top: -1330px;
width: 450px;
height: 450px;
}
#pc5spec{
position: relative;
left: 825px;
top: -1350px;
font-size: 25px;
float: center;
}
#PC6{
width: 450px;
height: 450px;
position: relative;
top: -1950px;
left: -150px;
float: right;
}
#pc6spec{
position: relative;
font-size: 25px;
float: right;
left: 225px;
top: -1510px;
}
#Order4{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
float: left;
border-radius: 50px;;
position: relative;
left: 270px;
top: -660px;
}
#Order4:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#Order5{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
float: left;
border-radius: 50px;;
position: relative;
left: 700px;
top: -660px;
}
#Order5:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#Order6{
color: black;
text-decoration: none;
border: 3px solid black;
padding: 10px 40px;
float: left;
border-radius: 50px;;
position: relative;
left: 1120px;
top: -660px;
}
#Order6:hover{
background-color: black;
transition: 0.5s;
color: white;
}
img { max-width: 100%; height: auto; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style2.css">
<title>Computer Store MK</title>
</head>
<body>
<section class="section">
<nav id="nav">
<div>
<ul>
<li>Home</li>
<li>Shops</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<h3>Contacts</h3>
<p id="store">Computer Store MK</p>
</nav>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<img src="https://cdn.wccftech.com/wp-content/uploads/2020/09/Gmail.png" id="emailimg">
<p id="email">Contact Me Via Buisness Email</p>
<img src="https://media.istockphoto.com/vectors/phone-icon-call-application-symbol-green-round-button-flat-interface-vector-id1250911025?k=20&m=1250911025&s=170667a&w=0&h=1aZJUHR8KVcvWKyVaufUdR8yN_r5VqTCfyGNx8pdOAY=" id="numimg">
<p id="num">Contact Me Via Number</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/1024px-Instagram_logo_2016.svg.png" id="insimg">
<p id="ins">Contact Me Via Instagram</p>
#import url('http://fonts.cdnfonts.com/css/segoe-ui-variable');
*{
margin: 0 ;
padding: 0;
}
html,body {
width: 100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
body{
font-family: 'Segoe UI Variable', sans-serif;
}
.home{
text-decoration: none;
color: white;
}
.home:hover{
transition: 1s;
text-shadow: 3px 3px red;
}
header{
background-size: cover;
background-position: center;
z-index: 1;
}
h2{
padding: 0px 790px;
font-size: 30px;
font-weight: bolder;
color: #2f3638;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
nav{
width: 100%;
height: 75px;
background-color: #273a63;
line-height: 75px;
padding: 0px -15px;
}
h3 {
float: left;
left: 30px;
color: white;
font-size: 30px;
color: #e0dfdc;
position: relative;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: #Fff;
font-size: 18px;
text-transform: uppercase;
padding: 0px 32px;
}
#store{
font-size: 30px;
font-weight: bolder;
position: relative;
float: right;
top: 0px;
right: 352px;
color: whitesmoke;
}
#email{
position: relative;
font-size: 35px;
top: -102px;
left: 122px;
}
#emailimg{
position: relative;
width: 640px;
height: 400px;
top: -75px;
left: 40px;
}
#numimg{
position: relative;
width: 330px;
height: 330px;
top: -495px;
left: 780px;}
#num{
position: relative;
font-size: 35px;
left: 780px;
top: -480px;
}
#insimg{
position: relative;
width: 230px;
height: 230px;
top: -816px;
left: 1400px;
}
#ins{
position: relative;
font-size: 35px;
top: -760px;
left: 1315px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style3.css">
<title>Computer Store MK</title>
</head>
<body>
<section class="section">
<nav id="nav">
<div>
<ul>
<li>Home</li>
<li>Shops</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<h3>About Section</h3>
<p id="store">Computer Store MK</p>
</nav>
<p id="about"> Computer Store MK is a Computer Store in North Macedonia Running Since 2004 Where We Sell:<br>Computers, parts, accessories. CSMK Is The Most Relaible Computer Store Out There.<br> We Have The Latest and Greatest Components And The Cheapest Prices Of Any Other Store.<br><br><b id="porder">So Order Now!</b></p>
Order a PC!
<p id="copyr">©Computer Store MK 2022.</p>
#import url('http://fonts.cdnfonts.com/css/segoe-ui-variable');
*{
margin: 0 ;
padding: 0;
}
html,body {
width: 100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
body{
font-family: 'Segoe UI Variable', sans-serif;
}
.home{
text-decoration: none;
color: white;
}
.home:hover{
transition: 1s;
text-shadow: 3px 3px red;
}
header{
background-size: cover;
background-position: center;
z-index: 1;
}
h2{
padding: 0px 790px;
font-size: 30px;
font-weight: bolder;
color: #2f3638;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
nav{
width: 100%;
height: 75px;
background-color: #273a63;
line-height: 75px;
padding: 0px -15px;
}
h3 {
float: left;
left: 30px;
color: white;
font-size: 30px;
color: #e0dfdc;
position: relative;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: #Fff;
font-size: 18px;
text-transform: uppercase;
padding: 0px 32px;
}
#store{
font-size: 30px;
font-weight: bolder;
position: relative;
float: right;
top: 0px;
right: 352px;
color: whitesmoke;
}
#about{
position: relative;
font-size: 35px;
left: 200px;
top: 200px;
max-width: 100%;
}
#orderpc{
color: black;
text-decoration: none;
border: 5px solid black;
padding: 20px 80px;
float: center;
border-radius: 100px;
position: relative;
top: 310px;
left: 771px;
font-size: 25px;
}
#orderpc:hover{
background-color: black;
transition: 0.5s;
color: white;
}
#porder{
position: relative;
font-size: 35px;
left: 600px;
}
#copyr{
font-size: 30px;
float: right;
left: -20px;
top: 520px;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style4.css">
<title>Computer Store MK</title>
</head>
<body>
<section class="section">
<nav id="nav">
<div>
<ul>
<li>Home</li>
<li>Shops</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<h3>Shop Locations</h3>
<p id="store">Computer Store MK</p>
</nav>
<h2 id="location">Computer Store MK Locations</h2>
<div class="store1">
<hr id="hr">
<p id="skopje"><b>Computer Store MK Skopje</b></p>
<hr id="hr">
<br>
<p id="lc1">street. 1523 бр.1, Скопје<br>
num: 02 3 080 877</p>
<br>
<br>
<p id="sc1"><b>Work Schedule</b><br>Monday to Friday 8:30 to 4:30h<br>Saturday 10:00 to 15:00h<br>Sunday Not Working</p>
</div>
<div class="store2">
<hr id="hr2">
<p id="skopje"><b>Computer Store MK Kavadarci</b></p>
<hr id="hr2">
<br>
<p id="lc1">Западен Булевар бр.2<br>
num: num: 043 447 730</p>
<br>
<br>
<p id="sc2"><b>Work Schedule</b><br>Monday to Friday 09:00 to 21:00h<br>Saturday 09:00 to 20:00h<br>Sunday Not Working</p>
</div>
<div class="store3">
<hr id="hr3">
<p id="skopje"><b>Computer Store Cair</b></p>
<hr id="hr3">
<br>
<p id="lc3">Булевар Македонска Косовска<br> бригада бр.11 1/1<br>num: 02 2 666 036</p>
<br>
<br>
<p id="sc3"><b>Work Schedule</b><br>Monday to Friday 09:00 to 21:00h<br>Saturday 09:00 to 21:00h<br>Sunday 09:00 to 21:00h</p>
</div>
#import url('http://fonts.cdnfonts.com/css/segoe-ui-variable');
*{
margin: 0 ;
padding: 0;
}
html,body {
width: 100%;
height:100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
body{
font-family: 'Segoe UI Variable', sans-serif;
}
.home{
text-decoration: none;
color: white;
}
.home:hover{
transition: 1s;
text-shadow: 3px 3px red;
}
header{
background-size: cover;
background-position: center;
z-index: 1;
}
h2{
padding: 0px 790px;
font-size: 30px;
font-weight: bolder;
color: #2f3638;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
nav{
width: 100%;
height: 75px;
background-color: #273a63;
line-height: 75px;
padding: 0px -15px;
}
h3 {
float: left;
left: 30px;
color: white;
font-size: 30px;
color: #e0dfdc;
position: relative;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
}
nav ul{
float: right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
color: #Fff;
font-size: 18px;
text-transform: uppercase;
padding: 0px 32px;
}
#store{
font-size: 30px;
font-weight: bolder;
position: relative;
float: right;
top: 0px;
right: 352px;
color: whitesmoke;
}
#location{
font-size: 35px;
font-weight: 700;
position: relative;
left: -765px;
top: 50px;
width: 600px;
}
.store1{
position: relative;
font-size: 30px;
left: 110px;
top: 150px;
}
#hr{
width: 370px;
border: none;
height: 2px;
background-color: #99aed1;
}
#lc1{
font-size: 32px;
}
#sc1{
font-size: 32px;
}
.store2{
position: relative;
font-size: 30px;
left: 765px;
top: -271px;
}
#lc2{
font-size: 32px;
}
#sc2{
font-size: 32px;
}
.store3{
position: relative;
font-size: 30px;
left: 1430px;
top: -691px;
}
#lc3{
font-size: 32px;
}
#sc3{
font-size: 32px;
}
#hr2{
width: 410px;
border: none;
height: 2px;
background-color: #99aed1;
}
#hr3{
width: 290px;
border: none;
height: 2px;
background-color: #99aed1;
}

to answer the question regardless of the code,
how to scale it down when sizing down the browser size
that is done using media queries
, now have a look at this link for better understanding and play with this code to get a better grip

Related

CSS boxshadow not overlapping dropdown

My problem
I made a glow effect with css when I hover over something in my navbar, but when I hover my mouse of the dropdown in my navbar the glow doesn't overlap the dropdown.
I tried
Adding z-index:1; to the dropdown and z-index:2; for the navbar
demo:
https://codepen.io/nemoko/pen/NWGybdy

Turns out the solution was quite simple
You just needed to change the z-index here:
.navbar .navbar-dropdown-content{
top: 100%;
margin: 0;
display: none;
position: absolute;
font-size: 0.8em;
background-color: rgb(0, 0, 0);
z-index:-1;
}
body{
background-color: grey;
}
/* Navigation bar */
.navbar {
background-color: rgb(0, 0, 0);
height: 3.5em;
width: 100%;
position: fixed;
top: 0;
z-index: 2;
}
.navbar .navbar-links {
font-size: 2em;
border: none;
outline: none;
float: right;
margin: 0.25em 2em 0 0;
color: white;
text-decoration: none;
background-color: inherit;
font-family: inherit;
transition: ease-in-out 0.5s;
}
.navbar .navbar-links:hover {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #03a9f4, 0 0 30px #03a9f4, 0 0 40px #03a9f4, 0 0 55px #03a9f4, 0 0 75px #03a9f4;
}
.navbar .navbar-dropdown{
float: right;
width: 14.7em;
height: 100%;
z-index:1;
}
.navbar .navbar-dropdown-content{
top: 100%;
margin: 0;
display: none;
position: absolute;
font-size: 0.8em;
background-color: rgb(0, 0, 0);
z-index:-1;
}
.navbar .navbar-dropdown-content a{
float: none;
padding: 12px 16px;
display: block;
}
.navbar .navbar-dropdown:hover .navbar-dropdown-content{
display: block;
}
.navbar .navbar-dropdown:hover .navbar-dropbtn{
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #03a9f4, 0 0 30px #03a9f4, 0 0 40px #03a9f4, 0 0 55px #03a9f4, 0 0 75px #03a9f4;
}
<div class="navbar">
Twotter
<div class="navbar-dropdown">
<button class="navbar-dropbtn navbar-links">
test test
<i class="fa fa-caret-down"></i>
</button>
<div class="navbar-dropdown-content">
Profiel
Admin panel
</div>
</div>
</div>

Vertical align corrupts break line

I have this page which is a page for showing a product and what I'm trying to do is to have the image of the product on the right side and on the left side having the name, price and add to cart button. I use vertical align on img so the text goes to top but doing this means I have to use display inline-block so I can't use block to make the texts go one every line. I also tried to use <br> but it makes the text go under the image.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product</div><br>
<div class="price">$59.99</div>
</article>
</body>
And this is what I'm trying to make:
.image{
margin: 0 50px;
float: right;
border: 1px solid black;
width: 100px;
height: 100px;
}
.text{
float: right;
}
<body>
<span class="image">IMAGE</span>
<span class="text">text</span><br>
<span class="text">text</span>
</body>

instead of adding outside div , add it inside.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product<br><div class="price">$59.99</div></div><br>
</article>

just style it
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
font-size: 15px;
font-weight: normal;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name"><h2>name of product</h2><h3 class="price">$59.99</h3></div>
</article>
</body>

How to remove space between ul and div in css

I have a problem with unwanted gap between ul and div. Maybe you know solution?
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-size: 0;
}
#tabs li {
display: inline-block;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
font-size: 16px;
}
#content {
background: #fff;
padding: 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
<ul id="tabs">
<li>First</li>
<li>Second</li>
<li>Random</li>
</ul>
<div id="content">
<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
</div>
This problem occurred after inline-block adding. I searched for solutions, but what I have found that was for horizontal gaps (I have fixed it by adding font-size: 0; in parent tab). Maybe there is some solution for vertical gaps?

in #content add float:left; margin-top:0;

Remove the font-size:0
and edit margin to this
#tabs li {
margin: 0 0;
}
you gave it 0.5em which is causing the space between them
Hope it helps

You added padding to the content div which caused this effect
Here's a fiddle where I changed the padding to 0 2em instead
https://jsfiddle.net/6r0x3n0e/
#content {
background: #fff;
padding: 0 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
Hope this helps

Set padding to the following: padding:0em 2em 2em 2em;
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-size: 0;
}
#tabs li {
display: inline-block;
margin: 0 .5em 0 0;
}
#tabs a {
position: relative;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
font-size: 16px;
}
#content {
background: #fff;
padding: 0em 2em 2em 2em;
height: 220px;
position: relative;
z-index: 2;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
width: 1100px;
margin-left: auto;
margin-right: auto;
}
<ul id="tabs">
<li>First</li>
<li>Second</li>
<li>Random</li>
</ul>
<div id="content">
<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
</div>

CSS+ HTML (Insert picture in the right corner)

#font-face {
font-family: Droid Sans;
src: url('../fonts/DroidSans-webfont.eot');
src: local("Droid Sans"), url('../fonts/DroidSans-webfont.woff');
}
#font-face {
font-family: Jenna Sue;
src: local("Jenna Sue"), url('JennaSue-webfont.ttf');
}
#font-face {
font-family: News Cycle;
src: local("News Cycle"), url('NewsCycle-Regular.ttf');
}
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
body {
font: normal .85em 'Droid Sans', arial, sans-serif;
background: #434434;
color: #E6EEB0;
padding-bottom: 40px;
}
p {
padding: 0 0 20px 0;
line-height: 1.5em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
font: normal 400% 'Jenna Sue', arial, sans-serif;
color: #222;
margin: 0 0 0px 0;
padding: 20px 0 5px 0;
}
h1 {
color: #C0CB77;
}
h2 {
font: normal 220% 'Jenna Sue', arial, sans-serif;
color: #FFF;
margin: 0;
padding: 0 0 8px 0;
}
h3 {
font: normal 125% 'trebuchet ms', arial, sans-serif;
}
h4, h5, h6 {
margin: 0;
padding: 0 0 5px 0;
font: normal 110% arial, sans-serif;
color: #999;
line-height: 1.5em;
}
h5, h6 {
font: italic 95% arial, sans-serif;
color: #888;
padding-bottom: 15px;
}
h6 {
color: #362C20;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
list-style-type: circle;
margin: 0 0 0 0;
padding: 0 0 4px 5px;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
#main, header, #logo, nav, #site_content, footer {
margin-left: auto;
margin-right: auto;
}
#main {
width: 950px;
margin: 20px auto 0 auto;
}
header {
width: 950px;
height: 105px;
}
#logo {
width: 220px;
float: left;
height: 100px;
background: transparent;
padding: 0 0 10px 10px;
}
#logo h1 {
font: normal 400% 'Jenna Sue', arial, sans-serif;
padding: 40px 0 0 17px;
color: #FFF;
}
#logo h1 a {
color: #FFF;
text-decoration: none;
}
#logo h1 a:hover {
color: #FFF;
text-decoration: none;
}
nav {
height: 26px;
width: 720px;
margin: 1px auto 0 auto;
float: right;
padding: 35px 0 0 0;
}
#site_content {
width: 950px;
overflow: hidden;
margin: 4px auto 0 auto;
padding: 0;
background: #565747;
border-top: 0;
border-bottom: 0;
}
#sidebar_container {
float: right;
width: 450px;
padding: 0;
height: 450px;
}
#content {
text-align: justify;
width: 444px;
padding: 0 0 5px 30px;
margin: 0;
float: left;
}
#content ul {
margin: 2px 0 5px 0px;
}
#content ul li {
list-style-type: none;
background: transparent url(../images/bullet.png) no-repeat left center;
margin: 0 0 0 0;
padding: 2px 0 2px 28px;
line-height: 1.5em;
}
#blog_container h4 {
font: normal 250% 'Jenna Sue', arial, sans-serif;
margin: 0 0 15px 0;
padding: 5px 0;}
#blog_container h4.select {
width: 475px;}
.blog {
background: url(../images/calendar.png) no-repeat;
width: 54px;
height: 46px;
float: left;
margin: 0 15px 0 0;
}
.blog h2 {
font: normal 90% arial, sans-serif;
text-shadow: none;
text-align: center;
margin: 0;
padding: 4px 0 0 0;
color: #FFF;
}
.blog h3 {
font: 130% arial, sans-serif;
text-shadow: none;
margin: -19px 0 0 0;
text-align: center;
color: #222;
}
footer {
width: 950px;
font: 109% 'Droid Sans', arial, sans-serif;
height: 75px;
padding: 17px 0 5px 0;
text-align: center;
background: #6F7640;
}
footer p {
padding: 0 0 10px 0;
}
footer a, footer a:hover {
color: #E6EEB0;
text-decoration: none;
}
footer a:hover {
color: #E6EEB0;
text-decoration: underline;
}
/* form styling */
.form_settings {
margin: 0;
}
.form_settings p {
padding: 0 0 10px 0;
}
.form_settings span {
padding: 5px 0;
float: left;
width: 170px;
text-align: left;
}
.form_settings input, .form_settings textarea {
padding: 4px;
width: 252px;
font: 100% arial, sans-serif;
border: 0;
border-bottom: 1px solid #C0CB77;
background: transparent;
color: #E6EEB0;
}
.form_settings .submit {
font: 140% 'News Cycle', arial, sans-serif;
border: 0;
width: 100px;
margin: 0 0 0 162px;
height: 30px;
padding: 0 0 6px 0;
cursor: pointer;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
background: #6F7640;
color: #FFF;
line-height: 15px;
}
.form_settings textarea, .form_settings select {
font: 100% 'Droid Sans', arial, sans-serif;
border: 1px solid #C0CB77;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
width: 250px;
overflow: auto;
}
.form_settings select {
width: 304px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
ul.images {
width:450px;
height:450px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
}
ul.images li {
position:absolute;
margin:0;
padding:0;
left:0;
right:0;
list-style:none;
}
ul.images li.show {
z-index:500;
}
ul img {
border:none;
}
/* from here: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers */
.lavaLampWithImage {
position: relative;
height: 25px;
padding: 10px 5px 15px 0;
margin: 10px 0 0 0;
overflow: hidden;
float: right;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: #63604F;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
height: 28px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li a {
font: 109% 'Droid Sans', arial, sans-serif;
text-decoration: none;
color: #FFF;
outline: none;
text-align: center;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
padding: 6px 9px 0 9px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 466px;
}
.curlycontainer .innerdiv{
background: transparent url(images/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
a.css3dbutton {
background: darkred; /* background color of button */
color: white;
text-decoration: none;
font: bold 28px Arial; /* font size and style */
position: relative;
top: 0; /* anchor main button's position */
bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
margin-bottom: 12px;
-moz-box-shadow: 0 -15px 5px darkred inset;
-webkit-box-shadow: 0 -15px 5px darkred inset;
box-shadow: 0 -15px 5px darkred inset;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.css3dbutton, a.css3dbutton:after {
display: inline-block;
padding: 10px 15px; /* vertical and horizontal padding of button */
-moz-border-radius: 8px/15px;
-webkit-border-radius: 8px/15px;
border-radius: 8px/15px;
outline: none;
}
a.css3dbutton:after { /* pseudo element to construct 3D side of button */
content: "";
position: absolute;
padding: 0;
z-index: -1;
bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
left: 0;
width: 100%;
height: 100%;
background: #6e0e0c; /* background color of 3D effect */
-moz-box-shadow: 1px 0 3px gray;
-webkit-box-shadow: 1px 0 3px gray;
box-shadow: 1px 0 3px gray;
}
a.css3dbutton:hover {
-moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
-webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
background: #bc3835; /* background color when mouse rolls over button */
}
a.css3dbutton:active {
top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
bottom: 0;
-moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
-webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}
a.button{
background: #ECECEC;
border-radius: 15px;
padding: 10px 20px;
display: block;
font-family: arial;
font-weight: bold;
color:#7f7f7f;
text-decoration: none;
text-shadow:0px 1px 0px #fff;
border:1px solid #a7a7a7;
width: 145px;
margin:0px auto;
margin-top:100px;
box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
-webkit-transition:box-shadow 0.5s;
}
a.button i{
float: right;
margin-top: 2px;
}
a.button:hover{
box-shadow: 0px 2px 1px white inset, 0px -2px 20px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
}
a.button:active{
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset, 0px -2px 20px white, 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
background:-webkit-linear-gradient(top, #d1d1d1 0%,#ECECEC 100%);
}
hr{
border: 0; border-bottom: 1px dashed #ccc; background: #999;
}
.styled-button-8 {
background: #25A6E1;
background: -moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
background: -webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: linear-gradient(top,#25A6E1 0%,#188BC0 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
padding:8px 13px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9
}
.display_img{
float: right;
}
This is my code where I print content.
<?php
echo"<div id=\"content\">";
echo"</div>";
?>
I'd like to add profile picture in a empty place (as seen in the picture) ,but how to move it to the right?
Here is a css of div content.
EDIT:
I want to move picture to right side (Shown in a picture where to)
Move right side

Give your image a class or id, and float it to right. This way it should move to the right of the div in which it is included. For example, give it a class named display_img and float it to right, like this:
.display_img{
float: right;
}
Another trick can be the following:
.display_img{
margin-right: 0;
/*you can keep the float here if you want, but it will not affect the results adversely if removed*/
}

Use float:right; for your profile picture.And float:left; for the rest of the content in your div.Instead of using float:left; as an overall for all your content in the div.

Not sure, If I get your point correctly, but you can try something like this:
<span>Skelbimas</span>
<table border="1">
<tr>
<td>Miestas</td>
<td rowspan="5">Insert Picture</td>
</tr>
<tr>
<td>Vardas</td>
</tr>
<tr>
<td>Telefono</td>
</tr>
<tr>
<td>El Pastas</td>
</tr>
<tr>
<td>Arnzius </td>
</tr>
</table>

Force height of DIV to 100%

I downloaded a website template to use for a small project but for some reason the sidebar used for navigation gets cut short when the content DIV isn't at least the height of the page. I've been tinkering with the CSS and inspecting it through Firefox Web Developer but aside from having the "min-height" set to something very large, I am not sure how to fix this issue.
Any suggestions as to what to look at in the CSS would be greatly appreciated.
http://brutalservers.com/dp/index.html
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Device Portal</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/hideshow.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.equalHeight.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".tablesorter").tablesorter();
}
);
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
</script>
<script type="text/javascript">
$(function(){
$('.column').equalHeight();
});
</script>
</head>
<body>
<header id="header">
<hgroup>
<h1 class="site_title">Device Portal</h1>
<h2 class="section_title">Dashboard</h2><div class="btn_view_site">View Site</div>
</hgroup>
</header> <!-- end of header bar -->
<section id="secondary_bar">
<div class="user">
<p>Brett Powell (3 Messages)</p>
<!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
</div>
<div class="breadcrumbs_container">
<article class="breadcrumbs">Website Admin <div class="breadcrumb_divider"></div> <a class="current">Dashboard</a></article>
</div>
</section><!-- end of secondary bar -->
<aside id="sidebar" class="column">
<form class="quick_search">
<input type="text" value="Quick Search" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
</form>
<hr/>
<h3>Devices</h3>
<ul class="toggle">
<li class="icn_new_article">New Article</li>
<li class="icn_edit_article">Edit Articles</li>
<li class="icn_categories">Categories</li>
<li class="icn_tags">Tags</li>
</ul>
<h3>Datacenters</h3>
<ul class="toggle">
<li class="icn_add_user">Add New User</li>
<li class="icn_view_users">View Users</li>
<li class="icn_profile">Your Profile</li>
</ul>
<h3>IP Allocations</h3>
<ul class="toggle">
<li class="icn_folder">File Manager</li>
<li class="icn_photo">Gallery</li>
<li class="icn_audio">Audio</li>
<li class="icn_video">Video</li>
</ul>
<h3>Inventory</h3>
<ul class="toggle">
<li class="icn_settings">Options</li>
<li class="icn_security">Security</li>
<li class="icn_jump_back">Logout</li>
</ul>
</aside><!-- end of sidebar -->
<section id="main" class="column">
<article class="module width_3_quarter">
<header><h3 class="tabs_involved">Content Manager</h3>
<ul class="tabs">
<li>Posts</li>
<li>Comments</li>
</ul>
</header>
<div class="tab_container">
<div id="tab1" class="tab_content">
<table class="tablesorter" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Entry Name</th>
<th>Category</th>
<th>Created On</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Lorem Ipsum Dolor Sit Amet</td>
<td>Articles</td>
<td>5th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Ipsum Lorem Dolor Sit Amet</td>
<td>Freebies</td>
<td>6th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Sit Amet Dolor Ipsum</td>
<td>Tutorials</td>
<td>10th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Dolor Lorem Amet</td>
<td>Articles</td>
<td>16th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Dolor Lorem Amet</td>
<td>Articles</td>
<td>16th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
</tbody>
</table>
</div><!-- end of #tab1 -->
<div id="tab2" class="tab_content">
<table class="tablesorter" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Comment</th>
<th>Posted by</th>
<th>Posted On</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Lorem Ipsum Dolor Sit Amet</td>
<td>Mark Corrigan</td>
<td>5th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Ipsum Lorem Dolor Sit Amet</td>
<td>Jeremy Usbourne</td>
<td>6th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Sit Amet Dolor Ipsum</td>
<td>Super Hans</td>
<td>10th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Dolor Lorem Amet</td>
<td>Alan Johnson</td>
<td>16th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Dolor Lorem Amet</td>
<td>Dobby</td>
<td>16th April 2011</td>
<td><input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
</tr>
</tbody>
</table>
</div><!-- end of #tab2 -->
</div><!-- end of .tab_container -->
</article><!-- end of content manager article -->
<article class="module width_quarter">
<header><h3>Messages</h3></header>
<div class="message_list">
<div class="module_content">
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
<div class="message"><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
<p><strong>John Doe</strong></p></div>
</div>
</div>
<footer>
<form class="post_message">
<input type="text" value="Message" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
<input type="submit" class="btn_post_message" value=""/>
</form>
</footer>
</article><!-- end of messages article -->
<div class="clear"></div>
</section>
</body>
</html>
CSS:
/* Essentials */
html, div, map, dt, isindex, form, header, aside, section, section, article, footer {
display: block;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
background: #F8F8F8;
font-size: 12px;
}
.clear {
clear: both;
}
.spacer {
height: 20px;
}
a:link, a:visited {
color: #77BACE;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Header */
header#header {
height: 55px;
width: 100%;
background: #222222 url(../images/header_bg.png) repeat-x;
}
header#header h1.site_title, header#header h2.section_title {
float: left;
margin: 0;
font-size: 22px;
display: block;
width: 23%;
height: 55px;
font-weight: normal;
text-align: left;
text-indent: 1.8%;
line-height: 55px;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
header#header h1.site_title a {
color: #fff;
text-decoration: none;
}
header#header h2.section_title {
text-align: center;
text-indent: 4.5%;
width: 68%;
background: url(../images/header_shadow.png) no-repeat left top;
}
.btn_view_site {
float: left;
width: 9%;
}
.btn_view_site a {
display: block;
margin-top: 12px;
width: 91px;
height: 27px;
background: url(../images/btn_view_site.png) no-repeat;
text-align: center;
line-height: 29px;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 0 #000;}
.btn_view_site a:hover {
background-position: 0 -27px;
}
/* Secondary Header Bar */
section#secondary_bar {
height: 38px;
width: 100%;
background: #F1F1F4 url(../images/secondary_bar.png) repeat-x;
}
section#secondary_bar .user {
float: left;
width: 23%;
height: 38px;
}
.user p {
margin: 0;
padding: 0;
color: #666666;
font-weight: bold;
display: block;
float: left;
width: 85%;
height: 35px;
line-height: 35px;
text-indent: 25px;
text-shadow: 0 1px 0 #fff;
background: url(../images/icn_user.png) no-repeat center left;
margin-left: 6%;
}
.user a {
text-decoration: none;
color: #666666}
.user a:hover {
color: #77BACE;
}
.user a.logout_user {
float: left;
display: block;
width: 16px;
height: 35px;
text-indent: -5000px;
background: url(../images/icn_logout.png) center no-repeat;
}
/* Breadcrumbs */
section#secondary_bar .breadcrumbs_container {
float: left;
width: 77%;
background: url(../images/secondary_bar_shadow.png) no-repeat left top;
height: 38px;
}
article.breadcrumbs {
float: left;
padding: 0 10px;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
height: 23px;
margin: 4px 3%;
}
.breadcrumbs a {
display: inline-block;
float: left;
height: 24px;
line-height: 23px;
}
.breadcrumbs a.current, .breadcrumbs a.current:hover {
color: #9E9E9E;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
text-decoration: none;
}
.breadcrumbs a:link, .breadcrumbs a:visited {
color: #44474F;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
font-weight: bold;}
.breadcrumbs a:hover {
color: #222222;
}
.breadcrumb_divider {
display: inline-block;
width: 12px;
height: 24px;
background: url(../images/breadcrumb_divider.png) no-repeat;
float: left;
margin: 0 5px;
}
/* Sidebar */
aside#sidebar {
width: 23%;
background: #E0E0E3 url(../images/sidebar.png) repeat;
float: left;
min-height: 500px;
margin-top: -4px;
}
#sidebar hr {
border: none;
outline: none;
background: url(../images/sidebar_divider.png) repeat-x;
display: block;
width: 100%;
height: 2px;}
/* Search */
.quick_search {
text-align: center;
padding: 14px 0 10px 0;
}
.quick_search input[type=text] {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #bbb;
height: 26px;
width: 90%;
color: #ccc;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
text-indent: 30px;
background: #fff url(../images/icn_search.png) no-repeat;
background-position: 10px 6px;
}
.quick_search input[type=text]:focus {
outline: none;
color: #666666;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}
/* Sidebar Menu */
#sidebar h3 {
color: #1F1F20;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
margin: 10px 0 10px 6%;
display: block;
float: left;
width: 90%;
}
.toggleLink {
color: #999999;
font-size: 10px;
text-decoration: none;
display: block;
float: right;
margin-right: 2%
}
#sidebar .toggleLink:hover {
color: #77BACE;
text-decoration: none;
}
#sidebar ul {
clear: both;
margin: 0; padding: 0;
}
#sidebar li {
list-style: none;
margin: 0 0 0 12%; padding: 0;
}
#sidebar li a {
color: #666666;
padding-left: 25px;
text-decoration: none;
display: inline-block;
height: 17px;
line-height: 17px;
text-shadow: 0 1px 0 #fff;
margin: 2px 0;
}
#sidebar li a:hover {
color: #444444;
}
/* Sidebar Icons */
#sidebar li.icn_new_article a {
background: url(../images/icn_new_article.png) no-repeat center left;
}
#sidebar li.icn_edit_article a {
background: url(../images/icn_edit_article.png) no-repeat center left;
}
#sidebar li.icn_categories a {
background: url(../images/icn_categories.png) no-repeat center left;
}
#sidebar li.icn_tags a {
background: url(../images/icn_tags.png) no-repeat center left;
}
#sidebar li.icn_add_user a {
background: url(../images/icn_add_user.png) no-repeat center left;
}
#sidebar li.icn_view_users a {
background: url(../images/icn_view_users.png) no-repeat center left;
}
#sidebar li.icn_profile a {
background: url(../images/icn_profile.png) no-repeat center left;
}
#sidebar li.icn_folder a {
background: url(../images/icn_folder.png) no-repeat center left;
}
#sidebar li.icn_photo a {
background: url(../images/icn_photo.png) no-repeat center left;
}
#sidebar li.icn_audio a {
background: url(../images/icn_audio.png) no-repeat center left;
}
#sidebar li.icn_video a {
background: url(../images/icn_video.png) no-repeat center left;
}
#sidebar li.icn_settings a {
background: url(../images/icn_settings.png) no-repeat center left;
}
#sidebar li.icn_security a {
background: url(../images/icn_security.png) no-repeat center left;
}
#sidebar li.icn_jump_back a {
background: url(../images/icn_jump_back.png) no-repeat center left;
}
#sidebar p {
color: #666666;
padding-left: 6%;
text-shadow: 0 1px 0 #fff;
margin: 10px 0 0 0;}
#sidebar a {
color: #666666;
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
#sidebar footer {
margin-top: 20%;
}
/* Main Content */
section#main {
width: 77%;
min-height: 500px;
background: url(../images/sidebar_shadow.png) repeat-y left top;
float: left;
margin-top: -2px;
}
#main h3 {
color: #1F1F20;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
margin: 8px 20px;
}
/* Modules */
.module {
border: 1px solid #9BA0AF;
width: 100%;
margin: 20px 3% 0 3%;
margin-top: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ffffff;
}
#main .module header h3 {
display: block;
width: 90%;
float: left;
}
.module header {
height: 38px;
width: 100%;
background: #F1F1F4 url(../images/secondary_bar.png) repeat-x;
-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
border-top-left-radius: 5px; border-top-right-radius: 5px;
}
.module footer {
height: 32px;
width: 100%;
border-top: 1px solid #9CA1B0;
background: #F1F1F4 url(../images/module_footer_bg.png) repeat-x;
-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;
}
.module_content {
margin: 10px 20px;
color: #666;}
/* Module Widths */
.width_full {
width: 95%;
}
.width_half {
width: 46%;
margin-right: 0;
float: left;
}
.width_quarter {
width: 26%;
margin-right: 0;
float: left;
}
.width_3_quarter {
width: 66%;
margin-right: 0;
float: left;
}
/* Stats Module */
.stats_graph {
width: 64%;
float: left;
}
.stats_overview {
background: #F6F6F6;
border: 1px solid #ccc;
float: right;
width: 26%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.overview_today, .overview_previous {
width: 50%;
float: left;}
.stats_overview p {
margin: 0; padding: 0;
text-align: center;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
}
.stats_overview p.overview_day {
font-size: 12px;
font-weight: bold;
margin: 6px 0;
}
.stats_overview p.overview_count {
font-size: 26px;
font-weight: bold;
color: #333333;}
.stats_overview p.overview_type {
font-size: 10px;
color: #999999;
margin-bottom: 8px}
/* Content Manager */
.tablesorter {
width: 100%;
margin: -5px 0 0 0;
}
.tablesorter td{
margin: 0;
padding: 0;
border-bottom: 1px dotted #ccc;
}
.tablesorter thead tr {
height: 34px;
background: url(../images/table_sorter_header.png) repeat-x;
text-align: left;
text-indent: 10px;
cursor: pointer;
}
.tablesorter td {
padding: 15px 10px;
}
.tablesorter input[type=image] {
margin-right: 10px;}
ul.tabs {
margin: 3px 10px 0 0;
padding: 0;
float: right;
list-style: none;
height: 24px; /*--Set height of tabs--*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
border: 1px solid #ccc;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
line-height: 24px;
}
ul.tabs li a {
text-decoration: none;
color: #999;
display: block;
padding: 0 10px;
height: 24px;
}
ul.tabs li a:hover {
color: #44474F;
}
html ul.tabs li.active a {
color: #44474F;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #F1F2F4;
-webkit-box-shadow: inset 0 2px 3px #818181;
-moz-box-shadow: inset 0 2px 3px #818181;
box-shadow: inset 0 2px 3px #818181;
}
html ul.tabs li:first-child, html ul.tabs li:first-child a {
-webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px; border-bottom-left-radius: 5px;
}
html ul.tabs li:last-child, html ul.tabs li:last-child a {
-webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px; border-bottom-right-radius: 5px;
}
#main .module header h3.tabs_involved {
display: block;
width: 60%;
float: left;
}
/* Messages */
.message {
border-bottom: 1px dotted #cccccc;
}
input[type=submit] {
background: #D0D1D4 url(../images/btn_submit.png) repeat-x;
border: 1px solid #A8A9A8;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
font-weight: bold;
height: 22px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0 10px;
color: #666;
text-shadow: 0 1px 0 #fff;
cursor: pointer;
}
input[type=submit]:hover {
color: #333333;
}
input[type=submit].alt_btn {
background: #D0D1D4 url(../images/btn_submit_2.png) repeat-x;
border: 1px solid#30B0C8;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
font-weight: bold;
height: 22px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0 10px;
color: #003E49;
text-shadow: 0 1px 0 #6CDCF9;
cursor: pointer;
}
input[type=submit].alt_btn:hover {
color: #001217;
}
input[type=submit].btn_post_message {
background: #D0D1D4 url(../images/post_message.png) no-repeat;
display: block;
width: 37px;
border: none;
height: 24px;
cursor: pointer;
text-indent: -5000px;
}
input[type=submit].btn_post_message:hover {
background-position: 0 -24px;
}
.post_message {
text-align: left;
padding: 5px 0;
}
.post_message input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #bbb;
height: 20px;
width: 70%;
color: #ccc;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
text-indent: 10px;
background-position: 10px 6px;
float: left;
margin: 0 3.5%;
}
.post_message input[type=text]:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
color: #666666;
}
.post_message input[type=image] {
float: left;
}
.message_list {
height: 250px;
overflow-x:hidden;
overflow-y: scroll;
}
/* New/Edit Article Module */
fieldset {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #F6F6F6;
border: 1px solid #ccc;
padding: 1% 0%;
margin: 10px 0;
}
fieldset label {
display: block;
float: left;
width: 200px;
height: 25px;
line-height: 25px;
text-shadow: 0 1px 0 #fff;
font-weight: bold;
padding-left: 10px;
/*margin: -5px 0 5px 0;*/
text-transform: uppercase;
vertical-align: middle;
}
fieldset input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
height: 20px;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
padding-left: 10px;
background-position: 10px 6px;
margin: 0;
display: block;
float: left;
width: 96%;
margin: 0 10px;
}
fieldset input[type=text]:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}
fieldset select {
width: 96%;
margin: 0 10px;
border: 1px solid #bbb;
height: 20px;
color: #666666;
}
fieldset textarea {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
padding-left: 10px;
background-position: 10px 6px;
margin: 0 0.5%;
display: block;
float: left;
width: 96%;
margin: 0 10px;
}
fieldset textarea:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}
.submit_link {
float: right;
margin-right: 3%;
padding: 5px 0;
}
.submit_link select {
width: 150px;
border: 1px solid #bbb;
height: 20px;
color: #666666;
}
#main .module_content h1 {
color: #333333;
text-transform: none;
text-shadow: 0 1px 0 #fff;
font-size: 22px;
margin: 8px 0px;
}
#main .module_content h2 {
color: #444444;
text-transform: none;
text-shadow: 0 1px 0 #fff;
font-size: 18px;
margin: 8px 0px;
}
#main .module_content h3 {
color: #666666;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
margin: 8px 0px;
}
#main .module_content h4 {
color: #666666;
text-transform: none;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
margin: 8px 0px;
}
#main .module_content li {
line-height: 150%;
}

Set the height of these two elements two 100%
<aside id="sidebar" class="column" style="height: 100%;">
<section id="main" class="column" style="height: 100%;">
the style is also inline

Set the height of your sidebar 100% and it will work
<aside id="sidebar" class="column" style="height: 100%;">

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Responsive Design on a specific html website for any device - html

to answer the question regardless of the code, how to scale it down when sizing down the browser size that is done using media queries , now have a look at this link for better understanding and play with this code to get a better grip

Related

CSS boxshadow not overlapping dropdown

Vertical align corrupts break line

How to remove space between ul and div in css

CSS+ HTML (Insert picture in the right corner)

Force height of DIV to 100%

Categories

Resources