I am having a problem with an overlapping DIV.
This is how the webpage appears when the window is maximised
This is how the webpage appears when the window is shrunk
This is how the webpage appears when the user scrolls to the right (red arrow) to view the text/image but the problem is that the content overlaps the side bar (blue arrow).
So my question is, how do stop this happening (or how should I be doing this)?
This is my HTML/CSS (it's not in a Fiddle because I can't demonstrate the issue that way)
<!DOCTYPE html><head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>Example Title</title>
<style>
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.content {
width:auto;
float:left;
clear: right;
}
#sidebar #menubar li, #sidebar #menubar li:link, #sidebar #menubar li:visited {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
}
#sidebar #menubar li a, #sidebar #menubar li a:link, #sidebar #menubar li a:visited {
font-family: 'Open Sans', sans-serif; font-size: 80%;
color: #FFF;
text-decoration: none;
}
#logo {
height: 90px;
width: 200px;
margin-top: 0px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
}
#sidebar #menubar li:hover {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #06C;
}
#sidebar #menubar li a:hover {
font-family: 'Open Sans', sans-serif; font-size: 80%;
color: #FFF;
text-decoration: none;
}
#sidebar #menubar li#active{
font-family: 'Open Sans', sans-serif;
color: #FFF;
text-decoration: none;
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #0066CC;
}
#sidebar #menubar {
padding: 0px;
margin: 0px;
list-style-type: none;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-size: 125%;
color: #006;
text-decoration: none;
}html, body {
height:100%;
margin: 0px;
padding: 0px;
background-color: #FFF;
}
#sidebar {
width: 250px;
height: 100%;
left: 0;
top: 0;
float:left;
background-color: #006;
padding-top: 25px;
position: fixed;
clear: right;
overflow-y:auto;
overflow-x:hidden;
bottom: 0px;
}
#content {
width: auto;
float: left;
margin-left: 250px;
padding-top: 125px;
padding-right: 125px;
padding-bottom: 125px;
padding-left: 125px;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
}
#media only screen and (max-width: 500px){
#sidebar{
position:relative;
height:auto;
width:100%;
float:left;
clear: right;
padding-bottom: 25px;
}
#content {
position:relative;
width:auto;
float:left;
margin: 0px;
padding: 25px;
clear: right;
}
}
</style>
</head>
<body>
<section><div id="sidebar">
<div id="logo"><img src="http://dummyimage.com/200x89/000/fff&text=Logo" width="200" height="89" alt="" /></div>
<ul id="menubar">
<li >Link 1</li>
<li >Link 2</li>
<li >Link 3</li>
<li >Link 4</li>
<li >Link 5</li>
</ul>
</div></section>
<div id="content">
<div class="content">
<h1>Example H1</h1>
<p>Duis aliquam mauris ac felis tincidunt varius. Maecenas pharetra id risus sed adipiscing. Vestibulum non libero eu quam semper commodo. Aliquam et diam ac tortor molestie blandit. Nullam et sem elit. Aenean tincidunt vitae lacus luctus fringilla. Cras mattis placerat semper. Etiam ullamcorper nunc vel mauris suscipit feugiat. In ac sollicitudin tellus, quis condimentum velit. Sed aliquam, leo non luctus dignissim, sapien felis ultrices sapien, vitae sollicitudin tortor sapien viverra diam. Nam varius nulla sapien, in pharetra sem placerat pretium. Ut varius vehicula nisl vel scelerisque. In hac habitasse platea dictumst. Sed iaculis, risus condimentum accumsan sagittis, mauris sem accumsan lectus, interdum porta metus leo sit amet tortor.
</p>
<div class="content-image"><img src="http://dummyimage.com/650x400/000/fff&text=Large+Image" alt="" width="650" height="400" border="0" align="middle" /></div>
</div>
</div>
<div style='clear:both;'></div>
</body>
</html>
EDIT: The reason why the side bar has a position: fixed is because this happens if it isn't:
This is because the sidebar is fixed. To achieve what you want, try floating both the sidebar and the content to the left.
Here's a simplified example: Fiddle
#sidebar
{
float:left;
background-color:#56B7BF;
width:150px;
height:400px;
}
#content
{
float:left;
background-color:#BF5E56;
width:400px;
height:400px;
}
The side bar needs to have a position absolute, give this a read:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
<!DOCTYPE html><head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>Example Title</title>
<style>
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.content {
width:auto;
float:left;
clear: right;
}
#sidebar #menubar li, #sidebar #menubar li:link, #sidebar #menubar li:visited {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
}
#sidebar #menubar li a, #sidebar #menubar li a:link, #sidebar #menubar li a:visited {
font-family: 'Open Sans', sans-serif; font-size: 80%;
color: #FFF;
text-decoration: none;
}
#logo {
height: 90px;
width: 200px;
margin-top: 0px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
}
#sidebar #menubar li:hover {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #06C;
}
#sidebar #menubar li a:hover {
font-family: 'Open Sans', sans-serif; font-size: 80%;
color: #FFF;
text-decoration: none;
}
#sidebar #menubar li#active{
font-family: 'Open Sans', sans-serif;
color: #FFF;
text-decoration: none;
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #0066CC;
}
#sidebar #menubar {
padding: 0px;
margin: 0px;
list-style-type: none;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-size: 125%;
color: #006;
text-decoration: none;
}html, body {
height:100%;
margin: 0px;
padding: 0px;
background-color: #FFF;
}
#sidebar {
width: 250px;
height: 100%;
left: 0;
top: 0;
float:left;
background-color: #006;
padding-top: 25px;
position: absolute;
clear: right;
overflow-y:auto;
overflow-x:hidden;
bottom: 0px;
}
#content {
width: auto;
min-width: 700px;
float: left;
margin-left: 250px;
padding-top: 125px;
padding-right: 125px;
padding-bottom: 125px;
padding-left: 125px;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
}
#media only screen and (max-width: 500px){
#sidebar{
position:relative;
height:auto;
width:100%;
float:left;
clear: right;
padding-bottom: 25px;
}
#content {
position:relative;
width:auto;
float:left;
margin: 0px;
padding: 25px;
clear: right;
}
.content img {
display: none;
}
}
</style>
</head>
<body>
<section><div id="sidebar">
<div id="logo"><img src="http://dummyimage.com/200x89/000/fff&text=Logo" width="200" height="89" alt="" /></div>
<ul id="menubar">
<li >Link 1</li>
<li >Link 2</li>
<li >Link 3</li>
<li >Link 4</li>
<li >Link 5</li>
</ul>
</div></section>
<div id="content">
<div class="content">
<h1>Example H1</h1>
<p>Duis aliquam mauris ac felis tincidunt varius. Maecenas pharetra id risus sed adipiscing. Vestibulum non libero eu quam semper commodo. Aliquam et diam ac tortor molestie blandit. Nullam et sem elit. Aenean tincidunt vitae lacus luctus fringilla. Cras mattis placerat semper. Etiam ullamcorper nunc vel mauris suscipit feugiat. In ac sollicitudin tellus, quis condimentum velit. Sed aliquam, leo non luctus dignissim, sapien felis ultrices sapien, vitae sollicitudin tortor sapien viverra diam. Nam varius nulla sapien, in pharetra sem placerat pretium. Ut varius vehicula nisl vel scelerisque. In hac habitasse platea dictumst. Sed iaculis, risus condimentum accumsan sagittis, mauris sem accumsan lectus, interdum porta metus leo sit amet tortor.
</p>
<div class="content-image"><img src="http://dummyimage.com/650x400/000/fff&text=Large+Image" alt="" width="650" height="400" border="0" align="middle" /></div>
</div>
</div>
<div style='clear:both;'></div>
</body>
Related
HTML nested list won't work for me, below is the screenshot of the result but it's aligned to the main bullet. I've seen the tutorials and just did what they did but still the result on my code is not the same as seen on the screenshot. I'm wondering if any of you have encountered this problem. Hoping for some answers. Thank you!
Below is my HTML and CSS code:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
font-weight: 300;
color: rgb(48, 48, 48);
line-height: 1.9;
background-color: #f3f3f3;
}
.logo {
color: black;
text-transform: uppercase;
letter-spacing: 10px;
padding-right: 150px;
padding-top: 12px;
}
.logo img {
width: 170px;
height: 75px;
padding-top: 8px;
/* padding-right: ; */
/* border: 2px solid black; */
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #f3f3f3;
width: 100%;
z-index: 100;
height: 80px;
/* position: relative; */
/* border-bottom: 1px solid black; */
/* padding: 0 5rem; */
}
.nav-links {
display: flex;
/* justify-content: space-around; */
width: 30%;
}
.nav-links li {
list-style: none;
padding: 26px 40px;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 2px;
font-size: 15px;
}
nav li:hover {
background-color: rgb(6, 168, 106);
}
nav li:hover a {
color: white;
}
/* Section */
.section {
padding: 5rem 25rem;
border-bottom: 1px solid rgb(187, 185, 185);
/* display: flex; */
}
.section-header {
display: flex;
}
.section1img {
width: 300px;
height: 400px;
/* margin: 60px 150px; */
}
.section1Desc {
padding: 20px 20px;
margin-left: 50px;
text-align: justify;
}
.btnLearnMore {
background-color: rgb(12, 201, 160);
border: none;
border-radius: 5px;
padding: 10px;
margin-top: 30px;
font-size: 20px;
color: white;
}
.bamboo-section {
display: flex;
}
.imgBamboo {
width: 300px;
height: 400px;
}
.bamboo-description {
/* margin-left: 125px; */
margin-top: 50px;
}
.bamboo-description h3 {
color: rgb(16, 143, 16);
}
.btnKalma {
border: none;
border-radius: 5px;
background-color: rgb(25, 179, 145);
color: white;
padding: 5px;
font-size: 17px;
margin-top: 25px;
}
.btnKalma:hover {
background-color: rgb(3, 143, 112);
}
.bamboo-description p {
margin-top: 25px;
text-align: justify;
margin-right: 100px;
}
.lavender-section {
display: flex;
margin-top: 75px;
}
.lavender-description {
margin-left: 100px;
margin-top: 50px;
}
.lavender-description h3 {
color: rgb(202, 0, 158);
}
.lavender-description p {
text-align: justify;
margin-top: 25px;
}
.imgLavender {
width: 300px;
height: 400px;
}
.btnHimbing {
text-decoration: none;
border: none;
border-radius: 5px;
background-color: rgb(165, 50, 180);
color: white;
padding: 5px;
font-size: 17px;
margin-top: 25px;
}
.btnHimbing:hover {
background-color: rgb(122, 4, 138);
}
.benefits-header {
text-align: center;
}
.benefits-body {
display: flex;
justify-content: space-around;
}
.benefits-body div {
/* border: 1px solid black; */
/* height: 60px;
width: 550px; */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./src/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="./css/style.css" />
<title>Deux Citronella Trading</title>
<script defer src="./js/script.js"></script>
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="./rsc/logo2.png" alt="" />
<!-- <img src="./rsc/DeuxLogo.png" alt="Deux Logo" class="imgLogo" /> -->
</div>
<ul class="nav-links">
<li class="nav-link">Home</li>
<li class="nav-link">About</li>
<li class="nav-link">Contact</li>
<li class="nav-link">Products</li>
</ul>
</nav>
</header>
<section class="section" id="section-1">
<div class="section-header">
<img src="./rsc/room&linen.jpg" alt="" class="section1img" />
<div class="section1Desc">
<h3>ROOM & LINEN SPRAY</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec rhoncus elit at auctor pellentesque. Suspendisse luctus egestas vestibulum. Suspendisse finibus turpis eget orci fringilla,
in pretium mauris facilisis. Fusce efficitur quam non odio tristique porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec lobortis ullamcorper eros quis vehicula. Pellentesque et neque a velit bibendum volutpat.
</p>
<button class="btnLearnMore">Learn More</button>
</div>
</div>
</section>
<section class="section" id="section-2">
<div class="bamboo-section">
<div class="bamboo-description">
<h3>Room & Linen Spray: KALMA</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec rhoncus elit at auctor pellentesque. Suspendisse luctus egestas vestibulum. Suspendisse finibus turpis eget orci fringilla,
in pretium mauris facilisis. Fusce efficitur quam non odio tristique porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec lobortis ullamcorper eros quis vehicula. Pellentesque et neque a velit bibendum volutpat.
</p>
<button class="btnKalma">About Kalma ↓</button>
</div>
<img src="./rsc/bamboo.jpg" alt="Bamboo Spray" class="imgBamboo" />
</div>
<div class="lavender-section">
<img src="./rsc/lavender.jpg" alt="" class="imgLavender" />
<div class="lavender-description">
<h3>Room & Linen Spray: HIMBING</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec rhoncus elit at auctor pellentesque. Suspendisse luctus egestas vestibulum. Suspendisse finibus turpis eget orci fringilla,
in pretium mauris facilisis. Fusce efficitur quam non odio tristique porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec lobortis ullamcorper eros quis vehicula. Pellentesque et neque a velit bibendum volutpat.
</p>
<button class="btnHimbing">About Himbing ↓</button>
</div>
</div>
</section>
<section class="section" id="section-3">
<div class="benefits-header">
<h2>Benefits</h2>
</div>
<div class="benefits-body">
<div class="first-box">
<ul>
<li>Room freshener</li>
<ul>
<li>Leaving your rooms smelling fresh and relaxing</li>
</ul>
<li>Insect Repellant</li>
<li>Toilet Deodorizer</li>
<li>Sanitizer</li>
</ul>
</div>
<div class="second-box">
<ul>
<li>Car Humidifier</li>
<li>Air Purifier</li>
<li>Disinfectant Spray</li>
<li>Workspace Cleaner</li>
</ul>
</div>
</div>
</section>
</body>
</html>
It's because you do a 'reset' of the margin and padding of all elements with * (universal selector, matches all types) and its declarations.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
If you remove that, it's showing as you want it to be. Read more about * at MDN. You can also make only adjustments to ul's margin and padding as you wish.
body {
font-family: 'Poppins', sans-serif;
font-weight: 300;
color: rgb(48, 48, 48);
line-height: 1.9;
background-color: #f3f3f3;
}
.benefits-body {
display: flex;
justify-content: space-around;
}
<div class="benefits-body">
<div class="first-box">
<ul>
<li>Room freshener</li>
<ul>
<li>Leaving your rooms smelling fresh and relaxing</li>
</ul>
<li>Insect Repellant</li>
<li>Toilet Deodorizer</li>
<li>Sanitizer</li>
</ul>
</div>
<div class="second-box">
<ul>
<li>Car Humidifier</li>
<li>Air Purifier</li>
<li>Disinfectant Spray</li>
<li>Workspace Cleaner</li>
</ul>
</div>
</div>
I have an aside section that I'd like to have centered using a media query, so that once it's viewed on a mobile, it'll be at the bottom of the page aligned horizontally. Just like this:
This is what it's currently doing:
I have some images and text I don't want to share so I'll change them for this question...
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: white;
}
/*GLOBAL*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header ul {
padding: 0;
margin: 0;
}
.page-title {
font-size: 20px;
}
.page-title-center {
font-size: 20px;
text-align: center;
}
.subheading-center {
font-size: 15px;
text-align: center;
margin-top: 50px;
}
.dark {
padding: 15px;
background: #1CAC4B;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
.dark-center {
padding: 15px;
text-align: center;
background: #1CAC4B;
color: white;
margin: 10px;
}
#hyperlink {
color: #FFEE00;
}
#hyperlinkg {
color: #1CAC4B;
}
/*HEADER*/
header {
background: #1CAC4B;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #FFEE00 3px solid;
display: flex;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0 10px 0 10px;
}
header #branding {
float: left;
}
header #branding-img img {
float: left;
width: 60px;
height: 60px;
padding: 0 20px 20px 0;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 14px;
}
header .highlight, header .current a {
color: #FFEE00 /*YELLOW*/;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*SHOWCASE*/
#showcase {
background:url("../img/grass.jpg") no-repeat;
background-size: cover;
min-height: 450px;
text-align: center;
color: white;
}
#showcase h1 { /**/
margin-top: 150px;
font-size: 60px;
margin-bottom: 10px;
}
#showcase p {
font-size: 30px;
}
/* CONTACT INFO */
#contact {
color: white;
background: #1CAC4B;
padding: 25px;
border-bottom: #FFEE00 3px solid;
border-top: #FFEE00 3px solid;
}
#contact h1 {
float: left;
}
#contact p {
font-size: 20px;
margin-top: 22px;
font-weight: bold;
float: right;
}
/*BOXES*/
.boxes {
background: white; /*Background behind 3 circular images are white */
display: flex; /*Makes circles drop if page is squished */
flex-wrap: wrap; /*Makes circles in a horizontal row */
justify-content: center;
}
.boxes figure {
margin: 3.5%; /*makes it line up better */
text-align: center; /*Puts text in center*/
font-size: 20px;
}
.boxes figure img {
border-radius: 25px; /*Makes images circular */
width: 310px; /*Sets image width*/
height: 220px; /*Sets image height - heigh and width must be same to make it a circular */
box-shadow: gray 0 0 15px; /*Adds gray shadow to bottom of images */
}
/*MAIN-COL*/
article#main-col {
float: left;
width: 70%;
}
/*ABOUT PAGE SIDEBAR*/
aside#about-sidebar {
float: right;
margin-top: 50px;
}
aside#about-sidebar img {
width: 230px;
height: 184px;
/*257px*/
}
/*SERVICES*/
ul#services li {
list-style: none;
padding: 20px;
border: green solid 1px;
margin-bottom: 10px;
background: #e6e6e6;
}
/*SERVICES PAGE SIDEBAR*/
aside#service-sidebar {
float: right;
margin-top: 50px;
}
/*GALLERY SLIDESHOW*/
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
padding: 10px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
/*FOOTER*/
footer {
padding: 20px;
margin-top: 20px;
color: white;
background-color: #1CAC4B;
text-align: center;
}
/*MEDIA QUERIES*/
#media(max-width: 768px){
header #branding,
header nav,
header nav li,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
align-content: center;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#showcase h1 {
margin-top: 40px;
}
}
<body>
<main>
<header>
<div class="container">
<div id="branding-img">
<a href="index.html"><img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
</div>
<div id="branding">
<h1><span class="highlight">NAME SHORT</span>NAME</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">About The Company</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
</p>
<h1 class="page-title">About Me</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet sapien quis felis imperdiet scelerisque. Maecenas vulputate, nisl quis laoreet efficitur, urna nunc viverra massa, placerat commodo ligula tellus vel lacus. Ut molestie, purus id gravida sollicitudin, ipsum ipsum scelerisque diam, quis hendrerit mauris massa vitae quam. Donec maximus, felis sit amet tincidunt pretium, justo tellus cursus ex, quis vestibulum felis risus sed velit. Vivamus varius sapien sit amet nisl iaculis, et aliquet risus lobortis. In eget ullamcorper augue. If you are interested you can call me using my email or phone number displayed on the <a id="hyperlink" href="index.html">Home</a> page.
</p>
</article>
<aside id="about-sidebar">
<div class="dark">
<img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
<p>
PERSON NAME
</p>
</div>
</aside>
</div>
</section>
<footer>
<p>COMPANY</p>
</footer>
</main>
</body>
Of course, as soon as I spent 10 minutes making this question I figured out my problem within literally 10 seconds lol.
I doubt anyone else would have this problem but you never know, so I'll answer it and leave it here for anyone who needs it.
In the CSS file in the media queries section, I removed '#sidebar' from 'aside#sidebar {'
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I want my layout to look like this:
but it looks like this:
(I'm talking about the text on the right side of the image).
Why does it happen and how can I make it look the same?
This is for a project, and I can't use any reset/normalize file (in case of the browser throwing off the design).
I don't know how to also add the image in the snippet, I would've done that so you get a better representation of my problem.
Thanks.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
display: inline-block;
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
I have studied your CSS and it's not immediately clear to me why you should need to do this, but you can close the vertical gap above .continut-langa-imagine if you add the style declaration
vertical-align: top;
Working Example:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
display: inline-block;
vertical-align: top;
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="https://via.placeholder.com/150" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
I changed the block containing the image, text and header to a css-grid:
.rand { display: grid; grid-template-columns: min-content auto; grid-column-gap: 10px; }
This will give the image as much space as needed and the remaining space will be used by the text.
To let the header use the whole width I added:
.titlu { grid-column: span 2; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.rand {
display: grid;
grid-template-columns: min-content auto;
grid-column-gap: 10px;
}
.titlu {
color: #1A1A1A;
grid-column: span 2;
}
.continut-langa-imagine {
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
Using float:
Just add float: left; to the image and preferably a margin right and bottom as in the snippet here:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
float: left;
margin: 0 10px 10px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to make Iphone 6/7/8 version for my site.
Unfortuantely I do not know how to move my main menu to right corner so it would look like this in web site:
Right now the site looks like this:
Could you tell me how to move this menu?
What is more, I do not know how to move this 6 squares down to the text. I'm trying to usse marigin-bottom etc on SquaresDOWN div or UP but nothing is happening.
I'd really appreciate if you could help me with these two things.
css
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
.left h1{
font-size: 20px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
}
.left {
float: left;
width: 50%;
margin-right: 500px;
}
#ourteam
{
margin-top: 300px;
margin-left: 100px;
font-size: 60px;
font-weight: bold;
color:rgb(24, 188, 253);
}
#squaresUP div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#squaresDOWN div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#tytul
{
font: Bold 20px/23px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 33px;
margin-top: 60px;
}
#tytul1
{
font: Regular 14px/30px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 28px;
margin-top: 100px;
}
.square1 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square2 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square3 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square4 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square5 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square6 { background: #7FC4FD 0% 0% no-repeat padding-box;}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size:100% 3000px;
}
#ourteam
{
margin-top: 300px;
margin-left: 700px;
font-size: 80px;
font-weight: bold;
width: 400px;
color:rgb(24, 188, 253);
}
.left h1{
font-size: 27px;
width: 1500px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
margin-top: 50px;
}
.left {
float: left;
margin-right: 500px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
width: 1150px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 35px/15px Arial;
padding: 5px;
width: 50px;
}
}
html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-authors.css" >
</head>
<body>
<header>
<div class="row">
<ul id ="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
<section>
<article>
<p id="ourteam">Our Team.</p>
<div class="left">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. I</h1>
</div>
<div class="row2">
<div id="squaresUP">
<div class="square1" style='position:absolute;left:1100px; top:292px;'></div>
<div class="square2"style='position:absolute;left:1350px; top:292px;background: #F1F9FF 0% 0% no-repeat padding-box;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'>Name Surname</h1>
<h1 id="tytul1" style='position:absolute;left:0px; top:0px;'>Co-Founder & CTO</h1>
</div>
<div class="square3"style='position:absolute;left:1600px; top:292px;'></div>
</div>
<div id="squaresDOWN">
<div class="square4"style='position:absolute;left:1100px; top:560px;'></div>
<div class="square5"style='position:absolute;left:1350px; top:560px;'></div>
<div class="square6"style='position:absolute;left:1600px; top:560px;'></div>
</div>
</div>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
//edit
the squares should be right there. They should be centered under the text.
I have cleaned up your code a little bit and here you can find an example for how to create a header menu inside a css grid looks decent for iphone 7/8 view.
you can change the percentage based on your request to get it a bit bigger if you don't want to create more buttons,
if it doesn't helped you totally at least it could be a reference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.row{
display: grid;
grid-template-columns: 20% 80%;
}
.main-nav{
float: right;
display: inline-flex;
list-style: none;
font-size: 50%;
}
.main-nav li{
font-size: 50%;
}
</style>
</head>
<body>
<div class="row">
<div id ="logo"><img src="css-images/dingdog-logo.png"></div>
<div>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
</div>
<!-- create your html elements and divs below -->
<!-- make sure to arrange them in a decent way to be organzied with y our page -->
<!-- i would suggest you use css grid as i did for the menu and follow almost the same settings
which will make your view look more adjusted and responsive -->
</body>
</html>
Hello i'm making a website layout and i'm having a problem with responsivnes.
On bigger screen it looks like this
While on smaller one i get this
Gallery strips not in one row but in two
Here's my HTML file
body header
{
font: 400 100px/1.3 'Oleo Script', Helvetica, sans-serif;
}
#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
#menu li{
display:inline-block;
float:left;
margin-right: 1px;
}
#menu li a{
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family:
"Helvetica Neue"
,Helvetica,
Arial,
sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*hover for top level
#menu li:hover a {
background: #19c589;
}
/*drop down links
#menu li:hover ul a{
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*drop down hover
#menu li:hover ul a:hover{
background: #19c589;
color: #fff;
}
/*hide drop down links
#menu li ul{
display: none;
float: none;
}
/*vertical drop down
#menu li ul li{
display: block;
float: none;
}
/*prevent text wrapping
#menu li ul li a{
width:auto;
min-width: 100px;
padding:0 20px;
}
/*Display drop down on hover
#menu ul li a:hover + .hidden,.hidden:hover{
display: block;
}
*/
/*Strip the ul of padding and list styling*/
body{
margin: 0;
padding: 0;
border: 0;
font-family: 'Roboto',sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.75em;
color:#777;
vertical-align: baseline;
}
h1,h2,h3,h4,h5,h6
{
font-weight: 300;
color: #777;
}
h2
{
letter-spacing: -0.025em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
color: inherit;
text-decoration: none;
}
#header{
height:250px;
position: relative;
background: url(horizons.jpg);
background-position-x: 30%;
background-position-y: 90%;
background-repeat-x: no-repeat;
/*
background-attachment: fixed
*/
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
#menuDiv ul {
position: relative;
width:auto;
list-style-type:none;
margin:0;
margin-top: 10px;
padding:0;
top:0;
position: fixed;
margin-left: auto;
margin-right: auto;
}
/*Create a horizontal list with spacing*/
#menuDiv li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
#menuDiv li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height:
font-family: "Oleo Script","Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
#menuDiv li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
#menuDiv li:hover ul a {
background: #f3f3f3;
color: #2f0404;
height: 50px;
line-height: 40px;
}
/*Hover state for dropdown links*/
#menuDiv li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
#menuDiv li ul {
display: none;
}
/*Make dropdown links vertical*/
#menuDiv li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
#menuDiv li ul li a {
width: inherit;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
#menuDiv ul li a:hover + .hidden, .hidden:hover {
display: block;
}
#menuDiv ul#menu li:hover .hidden{
display: block;
}
/*For smartphone devices*/
#media screen and(max-width : 760px){
/*Dropdow inline*/
#nav ul{
position:static;
display: none;
}
/*vertical spacing*/
#nav li{
margin-bottom: 1px;
}
/*Make all menu links full width*/
#nav ul li, li a{
width: 100%;
}
/*Display 'show menu' link*/
#nav .show-menu {
display: block;
}
}
/*Show menu for phone browsers and hide it by default*/
#nav .show-menu{
font-family: "Helvectica Neue",Helvetica,Arial,sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
#nav input[type=checkbox]{
display: none;
}
/*Show menu when checkbox is chechked*/
#nav input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Wrap of the article
setting some positon width etc
*/
*/
#articleWrap{
}
#allContent{
vertical-align: baseline;
display:block;
float:left;
}
#articleContent{
max-width: 50%;
font-size: 11pt;
margin-left: auto;
margin-right:auto;
max-width:500px;
min-width: 100px;
}
/*leftSidebar holds row of links and comment section*/
/*row holds article field and leftSidebar*/
/*
.row {
font-weight: 300;
font-size: 10px;
line-height: 1.3;
padding-left: 10px;
padding-top:50px;
box-sizing: border-box;
float:left;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
top:0;
display: inline-flex;
}
.row header{
font-size:3.3em;
text-align: center;
padding-left: 40px;
}
.row list1{
float:left;
}
.row list2{
clear:left
}
.leftList{
float:left;
}
.leftList ul{
list-style-type: none;
}
.leftList li{
text-decoration: none;
border-bottom: 1px solid grey;
padding: 5px;
margin: 2px;
}
.leftList li:hover{
transform: scale(1.05);
}
leftSideBar properties*/
section,#textWrap {
margin-bottom: 3em;
vertical-align: top;
}
section {
padding-left: 50px;
padding-right: 50px;
}
/*Header element in section*/
#mainContent header{
/* padding-left: 50px; */
padding-top:40px;
margin-top:10px;
font-size:3.0em;
line-height: 1.3em;
letter-spacing: 2.7px;
text-align: center;
}
/*Left side bar configuration*/
/*date of comment add */
.posted
{
font-weight: bold;
}
.sidebar:first-child>*{
padding-top:0!important;
}
.sidebar>*{
padding-left:50px;
min-width: 400px;
}
.sidebar .row header{
padding-top:40px;
font-size:26pt;
}
/**/
/* remove bullets from lists */
.article-list li{
list-style-type: none;
}
.article-list a {
text-decoration: none;
color:#b9ba9b;
padding-left: 10px;
}
.article-list a:hover{
color:#6f6f5d;
}
.leftList header {
}
.commentSection header{
font-size:26pt;
}
*/
}
#textWrap{
width: 80.0%;
padding-left: 0;
}
#text{
font-size:13pt;
}
#mainContent{
display: inline-block;
max-width: 1000px;
min-width: 300px;
}
#main{
width: 100%;
}
#galleryIn{
}
.imageIn img{
width:200px;
height:200px;
margin:10px;
float:left;
box-shadow: 10px 10px 5px #888888;
}
.article-list li
{
}
/*Images preview */
#separatorImage header{
font-size:26pt;
}
ul.defaul li{
font-size:0.95em;
}
<html >
<head>
<meta lang="pl">
<META charset="UTF-8">
<TITLE>Tytuł strony!</TITLE>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700,500,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style2.css">
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<META NAME="description" CONTENT="Site description">
<META NAME="robots" CONTENT="ALL">
</head>
<body>
<div id="header">
</div>
<div id="SelectNoStyle">
<div id="menuDiv">
<ul id="menu">
<li>
Home
</li>
<li>
About ￬
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
<li>
Gallery ￬
<ul class="hidden">
<li>Photography</li>
<li>ConceptArt</li>
<li>Funny</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="allContent">
<div id="mainContent">
<div id="textWrap">
<section id="text">
<header style="font-size:3.4em;">Do you live fully ?</header>
<p>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor.
</p>
<p>
Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer.
</p>
<p>
Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
</p>
<p>
varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
</p>
</section>
</div>
</div>
</div>
<div class="sidebar">
<div class="row">
<div id="separatorImage">
<header> New in gallery </header>
<div id="galleryIn">
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
</div>
</div>
<div class="commentSection">
<section class="leftComment">
<header> Last Comments</header>
<ul class="last-com-list"></ul>
<li>
<p class="posted">
MAY 21, 2014 | (10 ) COMMENTS
</p>
<p class="comment">
Nullam non wisi a sem eleifend. Donec mattis libero eget urna. Pellentesque viverra enim.
</p>
</li>
<li>
<p class="posted">
MAY 21, 2014 | (10 ) COMMENTS
</p>
<p class="comment">
Nullam non wisi a sem eleifend. Donec mattis libero eget urna. Pellentesque viverra enim.
</p>
</li>
</section>
</div>
</div>
<!--PHP gallery which loads images from folder -->
</body>
</html>