I know this is a noob question, but I just can't figure this out! I'm laying out a page for our intranet and all I need to do is position some divs side by side. Each container is a different item, but all containers have the same structure, a header, some descriptive text, and an image. I will be adding items as they are given to me. This is basically just a page i'm creating for employees to sell items. Here is my css and an image of what I'm trying to achieve. Please let me know if this doesn't make sense, but as smart as you guys have proven to be in the past, i'm sure you get the idea.
.wrapper {
width: 1260px;
height: 900px;
margin: 0px auto;
position: relative;
}
.container {
width: 400px;
height: 400px;
margin: 10px;
position: absolute;
}
.itemText {
width: 350px;
height: 190px;
padding: 0px;
position: absolute;
top: 25px;
left: 25px;
}
.itemHead {
padding: 0px;
margin: 0px;
}
.itemDesc {
padding: 10px;
margin: 0px;
}
.itemThumb {
width: 350px;
height: 150px;
position: absolute;
bottom: 25px;
left: 25px;
}
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="itemText">
<div class="itemHead">
<p>Lorem ipsum.</p>
</div>
<div class="itemDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
</div>
</div>
<div class="itemThumb"></div>
</div>
<div class="container">
<div class="itemText">
<div class="itemHead">
<p>Lorem ipsum.</p>
</div>
<div class="itemDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
</div>
</div>
<div class="itemThumb"></div>
</div>
<div class="container">
<div class="itemText">
<div class="itemHead">
<p>Lorem ipsum.</p>
</div>
<div class="itemDesc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
</div>
</div>
<div class="itemThumb"></div>
</div>
</div>
</body>
</html>
Don't position your containers absolutely.
.container {
width: 400px;
height: 400px;
margin: 10px;
position: relative;
float:left;
}
At the end of the last container div, you'll need a div to clear: left;
<div style="clear:left;"></div>
Now when you add more div's, they will auto float, and the container will get cleared.
Absolute positioning is in that case really useless.
try this:
.container {
position: relative;
float: left;
width: 400px;
height: 400px;
margin: 10px;
}
Your divs have the same height, so using float is pretty convenient. By giving your .container the attribute position: relative .itemThumb is positioned correctly.
This should work
I don't know if I understand exactly
but one way to get the containers to line up is to set the .container class to
.container {
width: 30%;
height: 400px;
margin: 10px;
display: inline-block;
}
Adding the display: inline-block;
And removing the position:absolute.
Setting your width for each container to around 30% of the wrapper will ensure that three containers get lined up before they go to a new line.
You will need to take off all the position: settings IN your css file so that all the information stays contained within the div.
e.g.
.wrapper {
width: 1260px;
height: 900px;
margin: 0px auto;
position: relative;
}
.container {
width: 30%;
height: 400px;
margin: 10px;
display: inline-block;
border: 1px solid black;
}
.itemText {
width: 350px;
height: 190px;
padding: 0px;
top: 25px;
left: 25px;
}
.itemHead {
padding: 0px;
margin: 0px;
}
.itemDesc {
padding: 10px;
margin: 0px;
}
.itemThumb {
width: 350px;
height: 150px;
bottom: 25px;
left: 25px;
}
Related
Mockup:
The parent div's height is dynamic; it shrinks to fit the left-hand div (the one containing the text). I'd like the right-hand div (white background, with child img) to stretch vertically to fill the parent div. Unfortunately, height: 100% only works when the parent div's height is statically determined.
Here's what I've got right now:
.container {
background-color: lightgray
}
.blurb {
display: inline-block;
padding: 2em;
}
.decoration {
float: right;
background-color: white;
position: relative;
left: -10px;
height: 100% // XXX does not work
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
Answers to similar questions recommend using display: table-cell;, but then you have the issue of making the first (text) div stretch horizontally all the way, which is a different can of worms entirely.
Flexbox can do that.
.container {
background-color: lightgray;
display: flex;
border: 1px solid red;
width: 80%;
margin: 1em auto;
}
.blurb {
flex: 1;
padding: 2em;
}
.decoration {
display: flex;
align-items: center;
background-color: white;
margin-right: 1em;
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
<div class="container">
<div class="blurb">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae accusantium, magni commodi repellendus quidem facilis doloremque perspiciatis, ab odio omnis deleniti, obcaecati maiores dolores?
</div>
<div class="decoration">
✓
</div>
</div>
You can achieve it with position property. The parent container set to relative and child decoration set to absolute with top and bottom set to 0.
.container {
background-color: lightgray;
position: relative;
}
.blurb {
display: inline-block;
padding: 2em;
}
.decoration {
float: right;
background-color: white;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
/* Align the content to center */
display:flex;
justify-content:center;
align-items:center;
text-align: center;
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
I want to place text next to an image and add padding to it. I have both text and image in one box, so that may be problem. I also need site to be mobile friendly.
Here is my code:
.content-title {
font-size: 50px;
}
#section-a ul {
list-style: none;
margin: 0px;
padding: 0;
}
#tiso {
position: static;
padding: 0px;
height: auto;
float: left;
max-width: 800px;
max-height: 800px;
}
#tiso_text {
padding: 3em;
text-align: center;
}
<section id="section-a" class="grid">
<div class="content-wrap">
<ul class="obr">
<img src="IMG/tiso.png" alt="Tiso-main" id="tiso">
<h1 class="content-title">Jozef Tiso</h1>
<li class="textcontent">
<p id="tiso_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate obcaecati et porro quidem iure, odio.
</p>
</li>
</ul>
</div>
</section>
Now, it works when the browser is resized to minimum, but it doesn't work on full. I know why, see image below, I just don't know how to fix that.
Image of what I have, and what I need.
so here is my solution, i hope its that what you wanted..
.content-title {
font-size: 50px;
text-align: center;
}
.item {
max-width: 300px;
float: left;
padding: 20px 3rem;
}
#tiso {
position: static;
padding: 0px;
height: auto;
float: left;
max-width: 800px;
max-height: 800px;
display: block;
}
#tiso_text {
text-align: center;
}
<section id="section-a" class="grid">
<div class="content-wrap">
<div class="box">
<img src="IMG/tiso.png" alt="Tiso-main" id="tiso">
<div class="item">
<h1 class="content-title">Jozef Tiso</h1>
<p id="tiso_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptate obcaecati et porro quidem iure, odio.
</p>
</div>
</div>
</div>
</section>
I'd like to use CSS Grid. Something like this I think…
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto auto [whatever's left of the vh] auto auto;
position: relative;
}
Set the viewport with display: flex and height: 100vh and add to the last element
flex-grow: 1
.viewportDiv {
display: flex;
flex-direction: column;
height: 100vh;
}
.div1{
background-color: yellow;
height: 100px;
}
.remainingDiv{
background-color: red;
flex-grow: 1;
}
<div class="viewportDiv">
<div class="div1"></div>
<div class="remainingDiv"></div>
</div>
Using CSS Grid you need to wrap the top two elements and the remaining space and then apply display: grid to that.
In other words, your diagram actually was the solution.
The wrapper should have a height of 100vh…
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
background: pink;
display: grid;
grid-template-rows: 100vh auto auto;
position: relative;
}
.wrapper {
display: grid;
grid-template-rows: auto auto 1fr;
}
header {
background: green;
padding: .25em;
}
nav {
background: orangered;
padding: .25em;
}
main {
background: rebeccapurple;
}
footer {
background: yellow;
}
.subfooter {
background: blue;
}
<div class="wrapper">
<header>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione magnam placeat quia iusto, quisquam cum temporibus modi, ex dolorem velit fuga! Minima, ex.
</header>
<nav>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</nav>
<main></main>
</div>
<footer>Lorem, ipsum.</footer>
<div class="subfooter">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex dignissimos ratione maxime officia eum. ea!
</div>
You can do it using flex.
.a {
width: 100%;
height: auto;
}
.remaining {
width: 100%;
flex-grow: 1;
}
.holder {
display: flex;
flex-direction: column;
height: 100%;
}
html,
body {
height: 100%;
}
HTML code:
<div class="holder">
<div class="a">
Content here
</div>
<div class="a">
Content here
</div>
<div class="remaining">
Content here
</div>
</div>
I have some trouble keeping a div in it place.
My page is divided into two sides. Within the right side I want to have a couple of divs, the first of which should stay on top of it's parent div. The rest should scroll underneath this first div.
I tried it with position:fixed but that binds it to the screen instead of the wrapper div.
My HTML is as follows
<div class="side">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis cupiditate a aut totam similique non ipsam, sapiente, nisi possimus dolorum odit voluptatum? Vero nostrum, ab?
</div>
<div class="side">
<div class="wrapper">
<div class="box one">Lorem ipsum dolor sit amet.</div>
<div class="box two">Lorem ipsum dolor sit amet.</div>
<div class="box two">Lorem ipsum dolor sit amet.</div>
</div>
</div>
My CSS is as follows
.side{
width: 180px;
float:left;
}
.wrapper{
background-color:blue;
width: 180px;
height: 300px;
overflow: scroll;
position: relative;
}
.box{
width: 360px;
}
.one{
position: absolute;
top: 0;
left: 0;
height: 100px;
background-color: red;
z-index: 2;
}
.two{
z-index: 1;
margin: 0;
background-color: green;
height: 400px;
}
.wrapper > div:nth-child(2){
margin-top: 100px;
}
I made a demo at jsfiddle: Demo
To recapture, the red div (box one) needs to stay on top of the div while the two green divs (box two) slide underneath them as you scroll them up.
Any help would be greatly appreciated.
If I'm getting what you mean, just make the .one class fixed and remove the top and left attributes:
.one{
position: fixed;
height: 100px;
background-color: red;
z-index: 2;
}
http://jsfiddle.net/oouyu8av/1/
I have a containing DIV, that I use as part of my responsive grid. It expands to the maximum width I allow which is 1280px, then margins appear for large devices. Here's my CSS + a bit of Less.
.container
{
margin-left:auto;
margin-right:auto;
max-width:1280px;
padding:0 30px;
width:100%;
&:extend(.clearfix all);
}
However on some occasions I'd like to overflow sideways - lets say I have an background image or colour that needs to be full width. I'm not great at CSS - but is it possible to achieve what I want?
The most obvious solution is just to close the container...have your full width div then open a new container. The title 'container' is just a class...not an absolute requirement that it hold everything all at the same time.
In this instance you apply the background color to the full width div and you don't need to apply a color to the internal, restricted div.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
.fullwidth {
background: orange;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
/* background: orange; */
min-height: 50px;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
</div>
<div class="fullwidth">
<div class="container">
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
</div>
</div>
<div class="container">
<footer></footer>
</div>
However, for some they like a single all encompassing container so if all you are after is a background you could use a pseudo-element like so:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
height: 100px;
position: relative;
}
.mydiv:after {
content: "";
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: orange;
z-index: -1;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
<footer></footer>
</div>
Support for vw is IE9+ - See http://caniuse.com/#feat=viewport-units
There are cases where actual content is required in the 100% wide div and the container cannot be opened/closed at will (perhaps to retrofit a slider).
In those cases, where the height of the new div is known the same technique can be used to position it as to be 100% viewport wide:
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
height: 100px;
position: relative;
}
.myslider {
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: orange;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
<div class="mydiv">
<div class="myslider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
</div>
<footer></footer>
</div>
JSfiddle Demo
Note: there are instances where 100vw can cause overflow and a horizontal scrollbar might appear. overflow-x:hidden on the <body> can attend to that..it should not be an issue because everything else is still inside the container.
I found this super useful trick by using vw on margins (Source)
Example :
.inner-but-full {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
Demo :
html,body {
overflow-x: hidden; /* Prevent scrollbar */
}
.inner-but-full {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
height: 50px;
background: rgba(28, 144, 243, 0.5);
}
.container {
width: 300px;
height: 180px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.5);
}
<div class="container">
<div class="inner-but-full"></div>
</div>
Can I use :
http://caniuse.com/#feat=calc
http://caniuse.com/#feat=viewport-units
<meta charset="UTF-8">
<style type="text/css">p{text-align:center;margin-left:25%;height:300px;width:50%;border:1px solid red;margin-bottom:0;margin-top:0;padding:0;
} body{margin:0;text-align:center;height:100%;width:100%;max-width:100%;max-height:100%;}</style>
<p style="color:yellow;background-color: red;">yep</p><p style="color:red;background-color: yellow;">yep</p><p style="color:white;background-color: blue;">yep</p>