I've had a look for similar questions and tried removing the position attribute but unfortunatley that didn't work.
I have a container with 2 divs inside, and both those divs contain one image each. The images display correctly but the overall container has a height of 0px. Here is an image with the developer console open: https://gyazo.com/277d635619eb80d2d3f63a1c28c80314
This happened after trying to make the images responsive with width: 100%; and height: auto;
#landing-images {
width: 100%;
height: auto;
margin-top: 10%;
margin-bottom: 5%;
border: solid 2px black;
}
.leftLanding {
/*position: relative;*/
width: 80%;
float: left;
}
.rightLanding {
/*position: relative;*/
width: 80%;
float: right;
}
.landingImage {
width: 100%;
height: auto;
}
<div id="landing-images">
<div class="leftLanding">
<img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
</div>
<div class="rightLanding">
<img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
</div>
</div>
You just need to add.
overflow:auto; to #landing-images.
So, Your CSS will be like,
#landing-images {
width: 100%;
height: auto;
overflow:auto;
margin-top: 10%;
margin-bottom: 5%;
border: solid 2px black;
}
Because floating the child element removes it from the document flow and the parent will collapse. By adding the overflow rule, the desired behavior is restored.
The problem are the float attributes, use display: block and margin instead.
#landing-images {
width: 100%;
height: auto;
margin-top: 10%;
margin-bottom: 5%;
border: solid 2px black;
position:relative;
}
.leftLanding {
position: relative;
width: 80%;
display:block;
margin-right:auto;
}
.rightLanding {
position: relative;
width: 80%;
margin-left:auto;
}
.landingImage {
width: 100%;
height: auto;
}
<div id="landing-images">
<div class="leftLanding">
<img class="landingImage" src="http://cdn.playbuzz.com/cdn/d2b06305-f201-4127-8eb7-7410bcc0de02/2d6c2415-2b8c-430c-87a4-c516409d8488.jpg">
</div>
<div class="rightLanding">
<img class="landingImage" src="http://www.nationalgeographic.com/content/dam/animals/pictures/mammals/g/gray-wolf/gray-wolf_01.ngsversion.1484679603276.JPG">
</div>
</div>
You must clear the wrapper whenever there is a floating element inside it.
#landing-images {
width: 100%;
height: auto;
margin-top: 10%;
margin-bottom: 5%;
border: solid 2px black;
}
.leftLanding {
/*position: relative;*/
width: 80%;
float: left;
}
.rightLanding {
/*position: relative;*/
width: 80%;
float: right;
}
.landingImage {
width: 100%;
height: auto;
}
.clearfix::after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
<div id="landing-images" class="clearfix">
<div class="leftLanding">
<img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
</div>
<div class="rightLanding">
<img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
</div>
</div>
I always use the standard clearfix class with the following style:
.clearfix::after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
So, always have such a class on your global CSS. And add this class to all the wrappers which has floating elements inside it.
Read more about clearfix concept at:
https://css-tricks.com/snippets/css/clear-fix/
Related
I've checked multiple threads and have tried multiple options. I've tried setting display to block, setting specific width for both image and container. Any other condition that I might be missing out on?
HTML:
<footer>
<div id="footercontent">
<div id="logobox">
<img src="images/logo.png" /> <--- THIS IS THE IMAGE IN QUESTION
</div>
<div id="social">
</div>
</div>
</footer>
CSS:
footer {
width: 100%;
height: 200px;
background-color: white;
position: relative;
margin-top: 70px;
}
#footercontent {
width: 70%;
height: 100%;
background-color: black;
margin: auto;
}
#logobox {
width: 30%;
height: 100%;
margin-right: 0;
float: left;
}
img {
height: 70%;
position: absolute;
margin: auto;
display: block;
}
#social {
width: 70%;
height: 100%;
background-color: white;
float: left;
}
Remove position: absolute and apply margin: 0 auto to img. When position: absolute is applied on some element, it is taken out from the normal flow of DOM
img {
height: 70%;
margin: 0 auto;
display: block;
}
Goal: In the content area of a site, I need to make a decorative-only column that spans the height of two divs (containing images) beside it.
Problem: the column either has no height, regardless which attributes I give it, or only has the height of the first sibling div and no fill. I have tried height: 100%, min-height: 100%. Also tried making parent position: absolute and setting top: 0 and bottom: 0.
the code:
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
#B1 {
float: left;
width: 84%;
height: 100px; /* this will actually be the height of the img */
background-color: green;
}
#B2 {
width: 84%;
height: 100px; /* this will actually be the height of the img */
float: left;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
Thanks in advance for your help.
what I want: http://i.stack.imgur.com/sgr5g.png
What I get: http://i.stack.imgur.com/lS63m.png
You should change the left column to position: absolute.
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 20%;
position: absolute;
height: 100%;
background-color: red;
}
#B1 {
float: right;
width: 80%;
height: 100px;
background-color: green;
}
#B2 {
width: 80%;
height: 100px;
float: right;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
In your code you have height: 100px; /* this will actually be the height of the img */ for both img in your .row
You can do it like this also, fiddle http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/
in this example I set the height of 200px to the row and height of 100% to the column
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
height: 200px;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
Here's an alternate solution I found that works very well, too.
.row {
display: table-row;
}
#colLeft {
display: table-cell;
width: 15%;
background-color: red;
}
#B1 {
display: table-cell;
width: 84%;
height: auto;
background-color: green;
}
#B2 {
display: table-cell;
width: 84%;
height: auto;
background-color: #ff0;
}
I get a flexible count of elements out of a database and put them into a list.
There is a container below the list. This container should take the rest height of the parent container.
On the code below you can see my current result. the Div in #rightContent should take the complete rest height. But i dont know how.
Html:
<section>
<aside>
I'm a sidebar!
</aside>
<main>
<article id="leftContent">
<img src="http://fs1.directupload.net/images/150422/6x5qv8ik.png">
</article>
<article id="rightContent">
<h1>Headline</h1>
<hr>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<div>
<p>
a lot of text
</p>
</div>
</article>
</main>
</section>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
height: 100%;
}
section aside {
position: fixed;
right: 50px;
width: 150px;
background-color: firebrick;
color: white;
padding: 25px;
height: 100%;
}
section main {
position: relative;
margin-right: 250px;
left: 0;
display: block;
width: auto;
border: 1px solid yellow;
}
section #leftContent {
position: relative;
display: block;
border: 1px solid green;
padding: 0;
margin: 0;
height: auto;
width: 50%;
}
section #leftContent img {
width: 100%;
height: auto;
display: block;
}
section #rightContent {
position: absolute;
display: inline-block;
border: 1px solid blue;
right: 0;
margin-left: 50%;
width: 49%;
height: 100%;
top: 0;
}
section #rightContent div {
border: 1px solid violet;
position: relative;
margin-bottom: 0;
}
http://jsfiddle.net/kzkpLg11/
This image shows what i want.
You could do it like this: http://jsfiddle.net/kzkpLg11/1/
Involves a few extra elements but the browser support will be ok. It's basically all about this piece of CSS. But I suggest you have a look at the fiddle.
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
You could also solve this problem with Flexbox. But that might be a little trickier.
hello I have a problem with vertical-align: middle;
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
I want to div witch has .sub class will be vertical center of .wp div. plz help me.
Sorry for my bad english.
As an alternative, you can use transform's translateY method, like
transform: translateY(-50%);
Works here: http://jsfiddle.net/r5z8gjgu/embedded/result/
vertivcal-align works with table-cell. look how it works in jsfiddle.
this is the html and css
<div class="table">
<div class="tableRow">
<div class="wp">
<div class="sub"></div>
</div>
</div>
</div>
.table {
display: table;
width: 100px;
}
.tableRow{
display: table-row;
height: 400px;
}
.wp {
display: table-cell;
background-color: tomato;
vertical-align: middle;
}
.sub {
height: 200px;
background-color: green;
}
also you can achieve this by "relative" and "absolute" positions
.wp{
position: relative;
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
After looking at your questions I was curious and a quick google search gave me the following already from stackoverflow:
Vertically Aligning Divs
http://phrogz.net/css/vertical-align/index.html
http://jsfiddle.net/ktxpP/3/
In an attempt to not just provide a link answer:
The snippet below belongs to Lalit :
You can vertically align a div in other div. For this you must define css like this example on fiddle. Just see the small demo that vertically align a innerDiv in outerDiv.
HTML
My Vertical Div CSS
.outerDiv {
display: inline-flex; <== This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white; }
.innerDiv {
margin: auto 5px; <== This is responsible for vertical alignment
background-color: green; } .innerDiv class margin must be as margin: auto *px;
[* can be your desired value.]
display: inline-flex property is supported in latest(updated/current
versions) browsers with HTML5 support.
Always try to define height of vertically align div (i.e. innerDiv)
for any further compatibility issue.
.wp{
width: 100px;
height: 500px;
background-color: #000000;
display:inline-flex; <--
}
.sub{
width: 100%;
height: 20%;
background-color: red;
margin:auto; <--
}
<div class="wp">
<div class="sub"></div>
</div>
If I understand you correctly, you want something like this
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position:absolute;
top: 250px;
width: 100px;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
Hope that helps.
this is my solution try this
<html>
<head>
<style>
.wp{
width: 10%;
height: 10%;
float: left;
background-color: green;
border: 1px solid #00FF 00;
margin: 0.5%;
position: relative;
}
.sub
{
width: 50%;
height: 50%;
background-color: red;
position: absolute;
}
.center{
margin: 0 auto;
left: 25%;
}
.right{
left: 50%;
}
.middle {
top: 25%;
}
.bottom {
top: 50%;
}
</style>
</head>
<body>
<div class="wp">
<div class="sub center middle"></div>
</div>
</body>
</html>
I have the following HTML snippet:
<body>
<div class="main">
<div class="topBar">
<p>testing</p>
</div>
<div class="content">
<div class="broadcastBar">
<p>testing</p>
</div>
<div class="mainBody">
<p>more testing</p>
</div>
</div>
</div>
</body>
Here is my CSS:
div.main {
}
div.topBar {
background-color: Black;
color: White;
height: 50px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
div.broadcastBar {
background-color: Gray;
width: 300px;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
}
div.content {
background-color: Yellow;
position: absolute;
width: 100%;
top: 50px;
left: 0px;
height: 100%;
}
My question is this. As you can see by the markup and CSS, I'm trying to have divs be the sections of the screen. But because <div class="content" /> has a position of absolute, it is causing the div to push below the browser window by 50px (which is what it is relative to the topBar).
I've tried making it so that the content div doesn't have to be position absolute, but everything just pushes the divs all around and the div edges are no longer flush to each other or the browser window.
Any idea what I can do hear to alleviate my issue?
Edit
Added desired output: this screenshot is currently what the above markup and CSS render. This is what I'm going for (for the most part, without the extended/scroll bar effect). I want to have my divs flush against each other and to the browser window.
What is the best way to do this if not through absolute positioning?
What you are going to want to learn is using some standard formatting practises with float.
Using absolute to position your elements will in the long run hurt you. If all your elements are using float, you will be able to better control their appearance.
For Example:
div.topBar {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.broadcastBar {
background-color: Gray;
width: 70%;
height: 80%;
float: left;
}
div.content {
background-color: Yellow;
width: 30%;
height: 80%;
float: left;
}
#EDIT:
So you Have 3 divs and you will want to stack them sequencially.
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
Float follows this sequence so that by using these properties, elelments will be forced to fall after one another based on space constraints:
div.header {
background-color: Black;
color: White;
height: 20%;
width: 100%;
float: left;
}
div.left {
background-color: Gray;
height: 80%;
width: 70%;
float: left;
}
div.right {
background-color: Yellow;
height: 80%;
width: 30%;
float: left;
}
#QUESTION:
So If you need to use pixel measurements, then you will need to encapsulate all of the elements in another container with the max width and height that your layout will be.
<div class="container">
<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>
</div>
div.container{
height: 100px;
width: 100px;
float: left;
}
div.header {
background-color: Black;
color: White;
height: 20px;
width: 100px;
float: left;
}
div.left {
background-color: Gray;
height: 80px;
width: 70px;
float: left;
}
div.right {
background-color: Yellow;
height: 80px;
width: 30px;
float: left;
}