I try to do this layout with CSS only (no JS, etc.), within an existing html page (do NOT change the HTML code). But couldn’t get all the positions I need. See if anyone has a better idea. Thanks in advance.
The existing HTML is like (class name is used to illustrate it):
<body-wrapper>
<logo>
</logo>
<nav>
</nav>
<content>
</content>
<footer>
</footer>
</body-wrapper>
The layout I want is like:
|--------------------|
| logo | |
|------| |
| Nav | |
| | content |
| | |
| | |
|------|-------------|
| footer |
|--------------------|
Or this:
|--------------------|
| logo | |
|------| |
| Nav | |
| | content |
| | |
| | |
| |-------------|
| | footer |
|--------------------|
Note: I wish NOT to change the HTML layout (don't add another div to wrap the log and nav bar, etc.), and only change the CSS to get the desired layout. Also, I don't know the height of these components.
The way I tried is to set the width for Logo and Nav, and use absolute (top = 0, right = 0) for the content. However, the footer will jump up to just below the Nav and overlap with the content. :-(
Any idea to get the desired layout?
Thanks
Did you try display: flex; flex-wrap: wrap; with order:# ?
jsfiddle: http://jsfiddle.net/n3frons4/3/
It should be the easiest way to create responsive website.
You can get some illustrations from Codrops http://tympanus.net/codrops/ or Bootstrap http://getbootstrap.com
You can try this one.
html
<div class="wrapper">
<div class="left">
<header class="logo">logo</header>
<nav class="nav">Nav</nav>
</div>
<div class="main-content">content</div>
<footer class="footer">footer</footer>
</div>
css
.wrapper {
width:100%;
max-width:800px;
margin: 0 auto;
}
.left {
width:30%;
float:left;
}
.logo {
width:100%;
height: 50px;
background:blue;
}
.nav {
width:100%;
height: 100px;
background: pink;
}
.main-content {
width:70%;
height:auto;
float:right;
}
.footer {
clear:both;
width:100%;
padding: 1em 0;
background:red;
}
Here is the jsfiddel link to visaulize it https://jsfiddle.net/wrLzv4cx/.
Hope this helps
try this
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.body-wrapper{
width:800px;
height:400px;
border:#000 2px dashed;
}
.div_left{
height:400px;
width:200px;
border-right:#000 2px dashed;
float:left;
}
.logo{
width:200px;
height:100px;
border-bottom:#000 2px dashed;
}
.nav{
width:200px;
height:300px;
}
.div_right{
width:590px;
height:400px;
float:right;
}
.content{
width:590px;
height:300px;
border-bottom:#000 2px dashed;
}
.footer{
width:590px;
height:100px;
}
</style>
</head>
<body>
<div class="body-wrapper">
<div class="div_left">
<div class="logo">
logo
</div>
<div class="nav">
nav
</div>
</div>
<div class="div_right">
<div class="content">
content
</div>
<div class="footer">
footer
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
output ->
Here are two examples that can give you something to work off of depending on if the img/nav need to be stationary or not. It's simply accounting for the relationship between each elements position. Fairly self explanatory it you take the time to break apart the CSS.
Example 1: Fixed Nav
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 50px;
min-height: 100%;
background: #266080;
color: #fff;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.logo {
position: fixed;
width: 150px;
height: 150px;
}
.nav {
position: fixed;
top: 150px;
bottom: 0;
width: 150px;
background: #2EA1C7;
}
.content {
top: 0;
margin-left: 150px;
height: 100%;
padding: 20px;
line-height: 30px;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 150px;
padding: 20px;
background-color: #024D66;
text-align: center;
}
<div class="logo">
<img src="http://placehold.it/150x150/024D66/fff">
</div>
<nav class="nav"></nav>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with dypesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsext of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsext of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="footer">Footer</div>
Example 2: Non-fixed Nav
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 50px;
min-height: 100%;
background: #266080;
color: #fff;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.logo {
position: absolute;
width: 150px;
height: 150px;
}
.nav {
position: absolute;
top: 150px;
bottom: 0;
width: 150px;
background: #2EA1C7;
}
.content {
top: 0;
margin-left: 150px;
height: 100%;
padding: 20px;
line-height: 30px;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
padding: 20px;
background-color: #024D66;
text-align: center;
}
<div class="logo">
<img src="http://placehold.it/150x150/024D66/fff">
</div>
<nav class="nav"></nav>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with dypesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsext of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsext of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="footer">Footer</div>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper{
display: table;
width: 100%;
}
.wrapper .col{
display: table-cell;
vertical-align: top;
}
.wrapper .col-1{
width: 200px;
background: #ddd;
}
.wrapper .col-2{
background: #ccc;
}
.logo{
height: 100px;
line-height: 100px;
background: #f7f7f7;
color: #555;
text-align: center;
display: block;
}
nav,
section{
min-height: 250px;
padding: 15px;
}
footer{
min-height: 100px;
background: #999;
padding: 15px;
}
<div class="wrapper">
<div class="col col-1">
<aside>
LOGO
<nav>nav</nav>
</aside>
</div>
<div class="col col-2">
<section>content</section>
<footer>footer</footer>
</div>
</div>
Fiddle
Related
I'm trying to create a sidebar but I can't seem to make it sticky,
I need the totalWrapper (which includes the sidebar (red) and title ) to be sticky to the body AFTER we scroll past head
basically the black box should be sticky within the blue box, the blue box is the remaining height of the body
(the black and blue box are just added to explain the question and are legends i.e. not required in the actual code)
I feel like I'm making a rookie mistake.
can someone please explain what I'm doing wrong?
jsfiddle
* {
text-align: center;
}
html {
margin: 0;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
body {
margin: 0;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: pink;
position: relative;
}
#main {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
width: 50%;
background-color: white;
margin: auto;
}
#totalWrapper {
position: sticky;
top: 0;
}
#title {
width: 100%;
height: 50px;
background-color: green;
}
#optionsWrapper {
background-color: red;
position: relative;
height: 100vh;
width: 50%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header">head</div>
<div id="main">
<div style="margin:5rem">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div id="totalWrapper">
<div id="title">title</div>
<div id="optionsWrapper">
option 1<br>
option 2<br>
option 3<br>
option 4<br>
</div>
</div>
</body>
</html>
Ok, I did a little “hack” which I do not like very much since it does not feels clean and elegant (I will continue thinking on it). It gets the job done, though. I change the order of the HTML elements since the sticky part needs to come before the main content. I also clean the CSS a little bit to get rid of unnecessary code for the example to work, that way it is also easier to follow.
body {
margin: 0;
text-align: center;
font-size: 18px;
}
#header {
width: 100%;
height: 100px;
background-color: pink;
}
#stickyWrapper {
position: sticky;
height: 100vh;
top: 0;
}
#title {
height: 50px;
background-color: green;
}
#sidebar {
height: 100%;
width: 50%;
background-color: red;
}
#content {
margin-top: calc(-100vh + 50px);
/* =====> the negative height of the stickyWrapper
plus the positive height of the header */
margin-left: auto;
width: 50%;
}
<div id="header">head</div>
<div id="stickyWrapper">
<div id="title">title</div>
<div id="sidebar">
option 1<br> option 2<br> option 3<br> option 4<br>
</div>
</div>
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</div>
I was trying to draw a simple Blogspot page with HTML and CSS. I have designed some. Now I am stuck. I have a code:
body{
background-color: #5e769b;
font: 16px/28px, arial, sans-serif;
}
.container{
background-color: #edeff2;
width: 790px;
margin: auto;
}
.header{
padding-bottom: 20px;
background-color: #6191dd;
text-align: center;
}
.article{
padding: 20px;
text-align: justify;
background-color: #f9f9f9;
box-sizing: border-box;
width: 70%;
float: left;
}
.sidebar {
padding: 20px;
text-align: justify;
background-color: #f9f9f9;
box-sizing: border-box;
width: 30%;
float: right;
}
.footer{
padding: 10px;
text-align: center;
background-color: #6b4edb;
box-sizing: border-box;
width: 100%;
color: #263959;
}
.footer,
a {
text-decoration: none;
color: #fff;
}
<div class="container">
<div class="header">
<h1>welcome</h1>
<h2>test blog</h2>
</div>
<div class="article">
<h2>Article</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="sidebar">
<h2>sidebar</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="footer">
<h4>CopyRight # footer</h4>
</div>
</div>
This code is not letting the footer at the bottom. Footer is with the sidebar.
I want footer at the bottom of the container as shown in below image
https://i.imgur.com/PFuGq2I.jpg
What changes should I make in CSS or HTML?
Thank you.
You put your "footer" in a div. you should use the html tag .
So take off the < div class="footer" > thing and then go after the < /body > tag and write:
<footer class="footer">
<h4>Copyright # Footer</h4>
</footer>
put the <div> like this before <div class="footer">.
<div class="footerToBottom"></div>
and add css code for this segment:
.footerToBottom{
clear:both;
display:block;
width:0 !important;
height:0 !important;
min-height:0 !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden
}
body{
background-color: #5e769b;
font: 16px/28px, arial, sans-serif;
}
.container{
background-color: #edeff2;
width: 790px;
margin: auto;
}
.header{
padding-bottom: 20px;
background-color: #6191dd;
text-align: center;
}
.article{
padding: 20px;
text-align: justify;
background-color: #f9f9f9;
box-sizing: border-box;
width: 70%;
float: left;
}
.sidebar {
padding: 20px;
text-align: justify;
background-color: #f9f9f9;
box-sizing: border-box;
width: 30%;
float: right;
}
.footer{
padding: 10px;
text-align: center;
background-color: #6b4edb;
box-sizing: border-box;
width: 100%;
color: #263959;
}
.footer,
a {
text-decoration: none;
color: #fff;
}
.footerToBottom{
clear:both;
display:block;
width:0 !important;
height:0 !important;
min-height:0 !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden
}
<div class="container">
<div class="header">
<h1>welcome</h1>
<h2>test blog</h2>
</div>
<div class="article">
<h2>Article</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="sidebar">
<h2>sidebar</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="footerToBottom"></div>
<div class="footer">
<h4>CopyRight # footer</h4>
</div>
</div>
https://jsfiddle.net/ry9gyb8n/
Hi guys , I have been trying to solve this problem since a couple of weeks.
I have an auto height container , the left div in the container is auto height as it can have various different content inside it.
The right div will always have an image but I dont know the height of the image.
How do I make it so the image doesnt exceed the height of the content on the left?
.container {
float: left;
width: 100%;
height: auto;
border: 2px solid black;
}
.leftContainer {
float: left;
width: 48%;
border: 2px solid black;
}
.rightContainer {
width: 50%;
float: left;
}
img {
max-width: 100%;
}
<div class="container">
<div class="leftContainer">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="rightContainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg">
</div>
</div>
I would go with flex to create the layout and make the image out of the flow using absolute position so it won't give its container a height and thus the height will be equal to the left one. Then simply adjust the properties of the image to make it fit the container as you need:
.container {
display:flex;
border: 2px solid black;
}
.leftContainer {
flex:1;
border: 2px solid black;
}
.rightContainer {
flex:1;
position:relative;
}
img {
position:absolute;
top:0;
max-height:100%; /* Or height:100%*/
max-width:100%;
/*to center the image if needed*/
left:50%;
transform:translateX(-50%);
/**/
}
<div class="container">
<div class="leftContainer">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="rightContainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg">
</div>
</div>
Another solution is to use the same layout as above and make the image as background. You will have the same situation because there is no content and thus the height will be the same as the left column. Then adjust the image position/size using background properties:
.container {
display: flex;
border: 2px solid black;
}
.leftContainer {
flex: 1;
border: 2px solid black;
}
.rightContainer {
flex: 1;
position: relative;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg");
background-size: contain; /* or cover or 100% 100% or auto*/
background-position: top center;
background-repeat:no-repeat;
}
<div class="container">
<div class="leftContainer">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="rightContainer">
</div>
</div>
I have a popup div which has a height of 100%.
.popup{
height:100%;
}
I have gone ahead and created a 60% margin top
.popup{
margin-top:60%;
}
and so only 40% of space is available at the bottom end of the popup.
In the 40% bottom space,i want to have a scrollable div container of maybe height of 500px. This does not work and only the 40% space is available and no scrolling bars appear.
How can i have 500px on the 40% space available?.
Check this snippet:
body,
html,
.outer {
width: 100%;
height: 100%;
}
.wrapper-top, .wrapper-bottom {
position: relative;
width: 400px;
top: 0;
bottom: 0;
border: 1px solid #555;
}
.wrapper-top {
height: 60%;
}
.wrapper-bottom {
height: 40%;
}
.inner {
position: absolute;
width: 100%;
top: 0px;
bottom: 0px;
overflow-y: auto;
}
<div class="outer">
<div class="wrapper-top">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="wrapper-bottom">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
.main{
width:100%;
height:350px;
border:1px solid;
}
.top{
width:100%;
height:60%;
border:1px solid red;
}
.bottom{
display:inline-block;
width:100%;
height:38%;
border:1px solid #ff6600;
padding:5px;
overflow:auto;
}
.content{
width:100%;
height:500px;
border:1px solid blue;
}
<div class="main">
<div class="top"></div>
<div class="bottom">
<div class="content"></div>
</div>
</div>
Please check this fiddle: https://jsfiddle.net/vadimb/wx2v7pj6/
.popup {
margin-top: 60%;
background-color: red;
height: 250px;
overflow: hidden;
}
.inner {
overflow-y: scroll;
height: 250px;
}
And html
<div class="popup">
<div class="inner">
abcd<br/>....
</div>
</div>
I'm new to HTML/CSS and therefore not any good (yet). As a school assignment I'm making a website. my layout will be a header on the page-top, which is in a fixed position, so it scrolls with you. under the header it will be some space and then four white boxes on grey backgrounds, where each box will contain one image and a paragraph of text. My problem is to get the image and text to horizontally inline with each other e.g. text on the left hand side and the picture on the right side.
body {
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
margin-left: 50px;
}
#container {
width: 100%;
background-color: #29B1B1;
position:fixed;
top:0;
left:0;
margin: auto;
}
.top-ribbon-outer {
width: 100%;
background-color:#29B1B1;
color: white;
position: fixed;
top:0;
left:0;
margin:auto;
}
.top-ribbon-inner {
overflow: hidden;
}
h1 {
margin: 0;
float: left;
padding: 5px;
}
nav {
float: right;
}
li {
float: left;
padding-left: 15px;
padding-right: 15px;
}
ul {
list-style-type: none;
}
#logo {
font-family:"Oswald";
color: white;
font-size:32px;
}
Body {
background-color: #f0f0f0;
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
margin-left: 50px;
}
#innhold {
display: table
}
#innhold img {
margin: 3px;
width: 35%;
}
#topboks {
background-color: white;
margin-top: 3em;
width: 74%;
margin-left: 13%;
margin-right: 13%;
}
.boks {
background-color: white;
width: 74%;
margin-left: 13%;
margin-right: 13%
}
#kontakt {
}
<div class="container">
<div class="top-ribbon-outer">
<div class="top-ribbon-inner">
<h1>first last</h1>
<nav>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</nav>
</div>
</div>
</div>
<div id="innhold">
<div id="boks1">
<div id="topboks"> <span>Lorem dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
<img src="app.jpg" alt="app-interface" />
</div>
</div>
<div class="boks">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<img src="" alt="" />
</div>
<div class="boks">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<img src="" alt="" />
</div>
<div class="boks">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<img src="" alt="" />
</div>
<div id="kontakt">
<!-- will be a footer with contact information etc.-->
</div>
</div>
You have your text in a SPAN but not your images. Wrap each image in a SPAN just like the text already is. Make sure the wrapper DIV has width set wide enough to accommodate both spans.
<div class="row" width=100%>
<span class="picture">photo here</span>
<span class="article">text here</span>
</div>
Each ROW consisting of a picture on one side, and a text on the other is a DIV.
Inside that DIV, you add two SPANS -- one span for the picture, one span for the text.
Then you can adjust the PADDING of each span and div, controlling the background colors of each to get the borders you want.
Hope this will help you...
HTML code :-
<div class="container">
<div class="top-ribbon-outer">
<div class="top-ribbon-inner">
<h1>first last</h1>
<nav>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="wrapper">
<div id="boks1">
<div class="innhold topboks">
<span>
<p>
Lorem dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<img src="http://www.w3schools.com/cssref/img_tree.gif" alt="" />
</span>
</div>
</div>
<div class="innhold boks">
<span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<img src="http://www.w3schools.com/cssref/img_tree.gif" alt="" />
</span>
</div>
<div class="innhold boks">
<span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<img src="http://www.w3schools.com/cssref/img_tree.gif" alt="" />
</span>
</div>
<div class="innhold boks">
<span>
<p>Lorem Ipsum is simply dummy text of the printing
and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<img src="http://www.w3schools.com/cssref/img_tree.gif" alt="" />
</span>
</div>
<div id="kontakt">
<!-- will be a footer with contact information etc.-->
</div>
</div>
CSS Code :-
body {
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
margin-left: 50px;
}
#container {
width: 100%;
background-color: #29B1B1;
position:fixed;
top:0;
left:0;
margin: auto;
}
.top-ribbon-outer {
width: 100%;
background-color:#29B1B1;
color: white;
position: fixed;
top:0;
left:0;
margin:auto;
}
.top-ribbon-inner {
overflow: hidden;
}
h1 {
margin: 0;
float: left;
padding: 5px;
}
nav {
float: right;
}
li {
float: left;
padding-left: 15px;
padding-right: 15px;
}
ul {
list-style-type: none;
}
#logo {
font-family:"Oswald";
color: white;
font-size:32px;
}
Body {
background-color: #f0f0f0;
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
margin-left: 50px;
}
.innhold {
display: table;
margin-top:50px;
background-color: white;
}
img {
margin: 3px;
width: 35%;
float:right;
padding:10px;
margin: -257px 13px 0 0;
}
p{
text-align: justify;
width: 309px;
padding: 3px;
margin-right: 10px;
}
.topboks {
background-color: white;
margin-top: 3em;
width: 74%;
margin: 10px;
padding: 10px;
}
.boks {
background-color: white;
width: 74%;
margin: 10px;
padding: 10px;
}
.wrapper {
margin-top:50px;
margin-bottom:50px;
}
See --- JsFiddle