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;
}
Related
I wonder why mainCountainerHeadLogo does not stretch parent div mainCountainerHead height?
If I scale the page, both mainCountainerHeadTitle and mainCountainerHeadMenu stretch mainCountainerHead just fine.
Sorry for my english and thanks in advance!
http://jsfiddle.net/gvcs0r6b/
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.mainCountainer {
min-height: 100%;
width: 70%;
margin: 0 auto;
}
.mainCountainerHead {
background-color: aqua;
height: auto;
}
.mainCountainerHeadLogo {
height: 100px;
width: 20%;
background-color: blue;
float: left;
position: relative;
overflow: hidden;
}
.mainCountainerHeadLogo img {
position: absolute;
width: 100%;
height: auto;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
margin: auto
}
.mainCountainerHeadTitle{
margin-left: 20%;
width: 80%;
height: auto;
text-align: center;
padding-top: 3%;
}
.mainCountainerHeadMenu{
margin-left: 20%;
text-align: center;
background-color: orange;
width: 80%;
height: auto;
padding-top: 2%;
text-align: center;
}
.mainLink {
display: inline-block;
padding: 5px;
}
.mainLinkButton {
width: 90px;
height: 30px;
background-color: green;
font-size: 16px;
border: none;
color: white;
padding: 5px;
}
.mainLinkButton:hover {
background-color: darkgreen;
}
.mainLinkDropdown {
position: relative;
display: inline-block;
padding: 5px;
}
.dropdownContent {
display: none;
position: absolute;
min-height: 30px;
min-width: 130px;
text-align: left;
background-color: #f1f1f1;
z-index: 10;
}
.dropdownContent a {
display: block;
color: black;
padding: 12px 16px;
text-decoration: none;
}
.mainLinkDropdown:hover .dropdownContent{
display: block;
}
.dropdownContent a:hover{
background-color: #ddd;
}
<div class="mainCountainer">
<div class="mainCountainerHead">
<div class="mainCountainerHeadLogo">
<img src="https://i.ibb.co/cYzWJFM/logo-Copy.jpg" title="logo" />
</div>
<div class="mainCountainerHeadTitle">
<h4>Welcome aboard!</h4>
</div>
<div class="mainCountainerHeadMenu">
<div class="mainLink">
<button class="mainLinkButton">Main</button>
</div>
<div class="mainLinkDropdown">
<button class="mainLinkButton">Dropdown</button>
<div class="dropdownContent">
Link 1
Link 2
Link 3
</div>
</div>
<div class="mainLink">
<button class="mainLinkButton">Contacts</button>
</div>
</div>
</div>
</div>
In answer to your question:
That's because the float property puts the HTML elements out of the normal page flow, and this causes what you're experiencing. Its effect is similar to position: absolute which is to move the element to "a different layer".
How to solve it?
Well... there are a lot of ways to achieve what you want, and almost all of them requires to refactorize your code. Actually, you have a lot of code that makes it difficult to achieve your goal. You should get rid of float and start using other technics like Flexbox.
I could show you a solution if you provide a sketch of the layout you want.
change the CSS for img to this
.mainCountainerHeadLogo img {
width: 100%;
height: 100%;
margin: auto
}
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/
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.
I need to center an element within a div while there is another element nearby. When I use text-align center, it places the element close but it's not going exactly where I'd like due to another element nearby. I want the logo element to center exactly while the social element floats to the right.
#header {
width: 100%;
height: auto;
text-align: center;
background-color: #ffffff;
}
#logo {
width: 30%;
margin: 10px auto;
display: inline-block;
text-align: center;
}
#logo img {
width: 100%;
height: auto;
margin: auto;
}
#social {
width: 15%;
display: inline;
float: right;
}
#social img {
width: 25%;
display: inline-block;
}
<div id="header">
<div id="logo">
<img src="images/final/logo2.png">
</div>
<div id="social">
<img src="images/final/fb.png">
</div>
</div>
See this fiddle
To make the logo div centralize irrespective of the div taht holds the social link, you'll have to make the logo div absolute positioned.
Now, to make the absolute positioned logo div centered, you'll have to add left:0;right:0 to the CSS.
The revised CSS is as follows
CSS
#logo {
width: 30%;
margin: 10px auto;
position: absolute;
left: 0;
right: 0;
}
Try add this:
#logo {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
alternatively if #logo would have width: 100px; then position: absolute; left: 50%; margin-left: -50px;
Add center tag and remove float:right from social
#header {
width: 100%;
height: auto;
text-align: center;
background-color: #ffffff;
}
#logo {
width: 30%;
margin: 10px auto;
display: inline-block;
text-align: center;
}
#logo img {
width: 100%;
height: auto;
margin: auto;
}
#social {
width: 15%;
display: inline;
}
#social img {
width: 25%;
display: inline-block;
}
<div id="header">
<center>
<div id="logo">
<img src="images/final/logo2.png">
</div>
<div id="social">
<img src="images/final/fb.png">
</div>
</center>
</div>
I have created a two column layout. Here is the jsfiddle.net . My issue is that I want the line in the center with a 10px width to have 100% height. I have created a container div with the id #obal (height: auto). If I set #cara .inner's height to 100%, the center line disappears. What do I have change?
Thanks for reply.
The issue here seems to be that when you set #cara . inner height to 100% it takes the full height of it's parent container - #cara that in this case is 0px;
The solution may look like this:
#obal {
margin: 10px;
height: 200px;
}
#obal #cara {
position: relative;
float: left;
left: -20px;
height: 100%;
}
#cara .inner {
position: absolute;
height: 100%;
width: 10px;
float: left;
background: #336;
}
div#prvni {
float: left;
margin: 0px 30px;
width: 120px;
height: 100px;
background: #ff3322;
font-size: 0.95rem;
overflow: hidden;
}
div#prvni .inner, div#druhy .inner{
padding: 10px;
}
div#druhy {
width: 120px;
height: auto;
background: #393;
font-size: 1rem;
overflow: hidden;
float: left;
}
<div id="obal">
<div id="prvni">
<div class="inner">Prvni cast text neni sice nejsilnejsi, ale spisovatel se snazi popsat dulezite body jeho navstevy
</div>
</div>
<div id="cara">
<div class="inner"></div>
</div>
<div id="druhy">
<div class="inner">Druha cast mluvila hlavne o velkych problemech na startu, kdy se vsichni ucastnici nestihnuli pripravit a pote nasledovat zmatek. Jenze kazdy chtel vyhrat, tak to nevzdal <br> NIKDY :-)
</div>
</div>
</div>
Hope this helps.
http://jsfiddle.net/oapu11q4/20/
===================== CSS ===================
#obal {
display: table;
height: auto;
margin: 10px;
}
div#prvni {
background: none repeat scroll 0 0 #ff3322;
display: table-cell;
font-size: 0.95rem;
height: 100%;
width: 120px;
}
#obal #cara {
background: none repeat scroll 0 0 #336;
display: table-cell;
}
#cara .inner {
width: 10px;
}
div#druhy {
background: none repeat scroll 0 0 #393;
display: table-cell;
font-size: 1rem;
height: 100%;
width: 120px;
}
div#prvni .inner, div#druhy .inner {
padding: 10px;
}
===================== HTML =============================
<div id="obal">
<div id="prvni">
<div class="inner">Prvni cast text neni sice nejsilnejsi, ale spisovatel se snazi popsat dulezite body jeho navstevy
</div>
</div>
<div id="cara">
<div class="inner"></div>
</div>
<div id="druhy">
<div class="inner">Druha cast mluvila hlavne o velkych problemech na startu, kdy se vsichni ucastnici nestihnuli pripravit a pote nasledovat zmatek. Jenze kazdy chtel vyhrat, tak to nevzdal <br> NIKDY :-)
</div>
</div>
</div>
You can set the height to 100vh
Using #obal as a reference for #cara relative height:
#obal {
margin: 10px;
position: relative; overflow: hidden;
}
#cara {
float: left;
margin-left: -20px;
}
#cara .inner {
position: absolute;
width: 10px; height: 100%;
background: #336;
}
(...)
From the specification:
The percentage is calculated with
respect to the height of the generated box's containing block. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'.
Using an overflow: hidden to cut the line with a huge height:
#obal {
margin: 10px;
overflow: hidden;
}
#cara {
float: left;
position: relative; right: 20px;
}
#cara .inner {
position: absolute; top: 0; left: 0;
width: 10px; height: 10000px;
background: #336;
}
(...)
Using flex:
#obal {
margin: 10px;
display: flex;
}
#prvni, #druhy {
display: table;
}
Try this:
http://jsfiddle.net/Ls6sqz2n/
You'd needed to add height: 100%; to the element ancestors, including html and body:
html, body {
height: 100%;
}
#obal {
margin: 10px;
height: 200px;
height: 100%;
}
#cara {
position: relative;
width: 10px;
height: 100%;
float: left;
}
#cara .inner {
position: absolute;
right: 15px;
height: 100%;
width: 10px;
background: #336;
}
(...)