I've got a bunch of divs, one after the next, each with an image inside it. When I set min-height to a value higher than the height of the image, everything works fine:
But if I have it set to 50px while the image is 100+px, the images kind of "cascade"
What can I do to force the div to be at least as tall as the image inside it?
CSS
body {
background: #cccccc;
margin: 0px;
}
a {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
}
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
}
.post {
padding-top: 10px;
/*background-color: #ff0000;*/
}
.postimage {
float: left;
padding-right: 10px;
}
.postcomment {
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="reply">
One
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Two
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Three
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Four
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
</body>
</html>
Add clear: left to your div.
See this?
.postimage {
float: left;
padding-right: 10px;
}
When you float the contents of the div, the div does not stretch vertically to accommodate.
So, adding this:
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
clear: left;
}
Will resolve the issue.
Alternate solution
Another solution which I tend to prefer is to use the overflow hack, rather than clear:
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
width: 100%;
overflow: hidden;
}
You would expect that this would hide the part of the image below the div, but it has a different result: The overflow: hidden does not hide the contents, but rather causes the div to stretch down to contain the entire image.
Note: for this method to work on older browsers, you must specify a width (notice that I added that in the css above).
Related
Three DIVS
Top two Block
Third Inline
Third contains 4 Nested Inline DIVS
If I add any Padding to either of the Third Inline or 4 Nested Inline DIVs they render up into the second block DIV.
I have read up on Margin Collapsing but given Margin: 0px all elements doesn't seem relevant.
Sure something well known but I am unable to uncover where the behaviour is documented.
Thanks for any knowledge / pointers.
body {
margin: 0px;
}
#topEyesGrab {
background-color: DodgerBlue;
padding: 0px;
border: 0px;
margin: 0px;
}
#menuBar {
background-color: SlateBlue;
padding: 0px;
border: 0px;
margin: 0px;
}
#mainContent {
background-color: Violet;
padding: 0px;
border: 0px;
margin: 0px;
display: inline;
}
.mainBoxes {
background-color: Tomato;
padding: 4px;
border: 0px;
margin: 0px;
display: inline;
}
/* https://www.sitepoint.com/collapsing-margins/ */
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="css/maincss.css"> -->
</head>
<body>
<div id="pageContainer">
<div id="topEyesGrab">
Top Eyes Grab
</div>
<div id="menuBar">
Menu Bar
</div>
<div id="mainContent">
<div id="box01" class="mainBoxes">Box 01</div>
<div id="box02" class="mainBoxes">Box 02</div>
<div id="box03" class="mainBoxes">Box 03</div>
<div id="box04" class="mainBoxes">Box 04</div>
</div>
</div>
</body>
</html>
Your mainContent is inline but has padding, which leads to the issue. Try setting mainBoxes class CSS to display: inline-block; may solve it. inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.
For the difference between inline and inline-block: please refer to docs here
inline-block.
The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
However, you may need to update the styles of mainContent class as well. display:inline seems unnecessary, I commented it out.
body {
margin: 0px;
}
#topEyesGrab {
background-color: DodgerBlue;
padding: 0px;
border: 0px;
margin: 0px;
}
#menuBar {
background-color: SlateBlue;
padding: 0px;
border: 0px;
margin: 0px;
}
#mainContent {
background-color: Violet;
padding: 0px;
border: 0px;
margin: 0px;
/*display: inline;*/
}
.mainBoxes {
background-color: Tomato;
padding: 4px;
border: 0px;
margin: 0px;
display: inline-block;
}
/* https://www.sitepoint.com/collapsing-margins/ */
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="css/maincss.css"> -->
</head>
<body>
<div id="pageContainer">
<div id="topEyesGrab">
Top Eyes Grab
</div>
<div id="menuBar">
Menu Bar
</div>
<div id="mainContent">
<div id="box01" class="mainBoxes">Box 01</div>
<div id="box02" class="mainBoxes">Box 02</div>
<div id="box03" class="mainBoxes">Box 03</div>
<div id="box04" class="mainBoxes">Box 04</div>
</div>
</div>
</body>
</html>
why not display: flex?
just use display: flex on #mainContent and remove display: inline on .mainBoxes.
now you can use both margin and padding on the boxes.
body {
margin: 0px;
}
#topEyesGrab {
background-color: DodgerBlue;
padding: 0px;
border: 0px;
margin: 0px;
}
#menuBar {
background-color: SlateBlue;
padding: 0px;
border: 0px;
margin: 0px;
}
#mainContent {
background-color: Violet;
padding: 0px;
border: 0px;
margin: 0px;
display: flex; /*or inline-flex*/
}
.mainBoxes {
background-color: Tomato;
padding: 4px;
border: 0px;
margin: 8px;
/*display: inline;*/
}
/* https://www.sitepoint.com/collapsing-margins/ */
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="css/maincss.css"> -->
</head>
<body>
<div id="pageContainer">
<div id="topEyesGrab">
Top Eyes Grab
</div>
<div id="menuBar">
Menu Bar
</div>
<div id="mainContent">
<div id="box01" class="mainBoxes">Box 01</div>
<div id="box02" class="mainBoxes">Box 02</div>
<div id="box03" class="mainBoxes">Box 03</div>
<div id="box04" class="mainBoxes">Box 04</div>
</div>
</div>
</body>
</html>
I am creating website for my school (its something like match) but I am stuck on one thing :/ . I am trying to inline 2 images. One is for decoration and secound is like board for text. And its working but border is not comming down O.o and its under a div main (glavendrzac on my language) . Margin is working but border not. Its only "bordering" around logo :/ (See image below.)
http://prntscr.com/b0qtw7
<html>
<head>
<meta charset="UTF-8"/>
<title>ООУ "Јосип Броз Тито"</title>
<link rel="stylesheet" type="text/css" href="stilovi.css">
</head>
<body>
<div id = "glavendrzac">
<div class = "logopozicija">
<img src="sliki/logo.png"/>
</div>
<div id = "sliki">
<div class = "profesor">
<img src="sliki/profesor.png" width="270px"; height="450px";/>
</div>
<div id = "tabla">
<div class = "tablatekst">
test
</div>
</div>
</div>
</div>
<?php
//
?>
</body>
</html>
And this is CSS code
body
{
margin: 10px;
}
#glavendrzac
{
margin-left: 200px;
margin-right: 200px;
border: 2px solid black;
border-radius: 8px;
}
#sliki
{
}
.profesor
{
float:left;
}
#tabla
{
margin-top:50px;
float:right;
margin-left:30px;
border: 0px solid black;
border-radius:20px;
width: 800px;
background: url("sliki/tabla.png");
background-size: cover;
}
.tablatekst
{
margin-top: 30px;
margin-left: 40px;
margin-bottom: 30px;
margin-right: 40px;
}
Can someone help me :) IDK whats wrong.
If you add overflow: auto to the #glavendrzac then the floats will be contained within the containing div, which I think is what you need.
You will need to think about the widths of the various child elements to make sure that the professor image and text box fit within the parent container.
The CSS concept involved here is known as a block formatting context.
Reference: https://www.w3.org/TR/CSS2/visuren.html#block-formatting
#glavendrzac {
margin-left: 200px;
margin-right: 200px;
border: 2px solid black;
border-radius: 8px;
overflow: auto;
}
#sliki {}
.profesor {
float: left;
}
#tabla {
margin-top: 50px;
float: right;
margin-left: 30px;
border: 1px solid black;
border-radius: 20px;
}
.tablatekst {
margin-top: 30px;
margin-left: 40px;
margin-bottom: 30px;
margin-right: 40px;
}
<div id="glavendrzac">
<div class="logopozicija">
<img src="http://placehold.it/50x50" />
</div>
<div id="sliki">
<div class="profesor">
<img src="http://placehold.it/100x450" width="100px" ; height="450px" ;/>
</div>
<div id="tabla">
<div class="tablatekst">
test (this needs some work)
</div>
</div>
</div>
</div>
I am having trouble getting my image to be on the right side of the information that I am trying to display. My CSS skills are lacking and becoming more and more apparent, so the help is very appreciated.
Here is my HTML
<div id="facility_general_info">
<div id="facility_info">
<h3>Facility Information</h3>
<div id="facility_data">
<ul>
<li><b>Facility Number</b><p>...</p></li>
<li><b>Facility Name</b><p>...</p></li>
<li><b>Address</b><p>...</p></li>
<li><b>City</b><p>...</p></li>
<li><b>Province</b><p>...</p></li>
<li><b>Postal Code</b><p>...</p></li>
<li><b>Roof Area</b><p>...</p></li>
<li><b>Roof Area Inspected</b><p>...</p></li>
<li><b>Last Inspected</b><p>...</p></li>
<li><b>Inspected By</b><p>...</p></li>
<ul>
</div>
<!--facility front image-->
<div id="facility_image">
<div id="fac_image_wrapper">
<img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250"/>
</div>
<br />
</div>
</div>
</div>
I am trying to get #facility_image to "float" to the right side of #facility_data.
Here is my CSS
#facility_general_info {
padding: 5px;
float: left;
width: 750px;
line-height: 110%;
}
#facility_info ul {
margin-left: -40px;
list-style-type: none;
}
#facility_info h3 {
color: #0d55b7;
border-bottom: 2px solid #0d55b7;
}
#facility_info {
margin-left: 50px;
width: 750px;
float:left;
}
#facility_data{
width: 375px;
margin: 0 !important;
}
/*facility image*/
#facility_image {
margin-top: 100px;
margin-left: 400px;
width: 350px;
padding: 5px;
float: left;
}
#fac_image_wrapper p {
width: 250px;
}
#fac_image_wrapper{
text-align: center;
}
Here is a JSfiddle.
How can I float my image to the right hand side of the data I am trying to display?
You are setting a huge margin to the image div that is putting it way down the screen.
Let the #facility_data take 60% of the container div and float left, and let the image take the other 37% and remove the margin. You also need to give some margin right for #facility_data to keep some space between the 2 divisions :
#facility_image {
/*margin-top: 100px; <<<<< huge margin
margin-left: 400px;<<<<< huge margin*/
width: 37%;
padding: 5px;
float: left;
}
#facility_data
{
width:60%;
margin-right:2%;
float:left;
}
Working example :
#facility_general_info {
padding: 5px;
float: left;
width: 750px;
line-height: 110%;
}
#facility_info ul {
margin-left: -40px;
list-style-type: none;
}
#facility_info h3 {
color: #0d55b7;
border-bottom: 2px solid #0d55b7;
}
#facility_info {
margin-left: 50px;
width: 750px;
float:left;
}
#facility_data{
width: 375px;
margin: 0 !important;
}
/*facility image*/
#facility_image {
width: 37%;
padding: 5px;
float: left;
}
#facility_data
{
width:60%;
margin-right:2%;
float:left;
}
#fac_image_wrapper p {
width: 250px;
}
#fac_image_wrapper{
text-align: center;
}
<div id="facility_general_info">
<div id="facility_info">
<h3>Facility Information</h3>
<div id="facility_data">
<ul>
<li><b>Facility Number</b><p>...</p></li>
<li><b>Facility Name</b><p>...</p></li>
<li><b>Address</b><p>...</p></li>
<li><b>City</b><p>...</p></li>
<li><b>Province</b><p>...</p></li>
<li><b>Postal Code</b><p>...</p></li>
<li><b>Roof Area</b><p>...</p></li>
<li><b>Roof Area Inspected</b><p>...</p></li>
<li><b>Last Inspected</b><p>...</p></li>
<li><b>Inspected By</b><p>...</p></li>
<ul>
</div>
<!--facility front image-->
<div id="facility_image">
<div id="fac_image_wrapper">
<img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250"/>
</div>
<br />
</div>
</div>
</div>
Use display: inline-block to place the image horizontally with the data. Remove the margin set for the image since the image is already inside the parent container. Give a float: left for both the elements as the data comes first in the DOM, the image will go to the right.
#facility_general_info {
padding: 5px;
float: left;
width: 750px;
line-height: 110%;
}
#facility_info ul {
margin-left: -40px;
list-style-type: none;
}
#facility_info h3 {
color: #0d55b7;
border-bottom: 2px solid #0d55b7;
}
#facility_info {
margin-left: 50px;
width: 750px;
float: left; /* Add */
}
#facility_data {
width: 375px;
margin: 0 !important;
display: inline-block; /* Add */
float: left; /* Add */
}
/*facility image*/
#facility_image {
width: 350px;
padding: 5px;
float: left;
}
#fac_image_wrapper p {
width: 250px;
}
#fac_image_wrapper {
text-align: center;
}
<div id="facility_general_info">
<div id="facility_info">
<h3>Facility Information</h3>
<div id="facility_data">
<ul>
<li><b>Facility Number</b>
<p>...</p>
</li>
<li><b>Facility Name</b>
<p>...</p>
</li>
<li><b>Address</b>
<p>...</p>
</li>
<li><b>City</b>
<p>...</p>
</li>
<li><b>Province</b>
<p>...</p>
</li>
<li><b>Postal Code</b>
<p>...</p>
</li>
<li><b>Roof Area</b>
<p>...</p>
</li>
<li><b>Roof Area Inspected</b>
<p>...</p>
</li>
<li><b>Last Inspected</b>
<p>...</p>
</li>
<li><b>Inspected By</b>
<p>...</p>
</li>
<ul>
</div>
<!--facility front image-->
<div id="facility_image">
<div id="fac_image_wrapper">
<img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250" />
</div>
<br />
</div>
</div>
</div>
you have lacked float
#facility_data {
float: left;
}
#facility_image {
margin-top: 0;
margin-left: 0;
}
although not the best technique, you can learn to use FlexBox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've tidied up your JSFiddle, removing some of the unecessary HTML elements and also fixing an error in the HTML, which was the second <ul>. It should have been </ul>to close the list.
In the jsfiddle, we can see the following reduced css as an example:
.facility_info {
width: 800px;
}
.facility-list {
float:left;
width: 400px;
}
.facility-image {
width: 350px;
float: right;
}
.facility_info is wide enough to accomodate both the defined child widths and also the browser default <ul> styling which adds a margin.
Then the two children are floated left and right respectively. The selectors are added directly to the <ul> and <img /> tags as you don't need wrappers (though you could wrap these children and apply the css to the wrapper).
I've used classes rather than ids, this is better in the long run as it makes it easier to maintain css on a project. IDs add styles in a way that is hard to over-ride, can't be re-used and are unnecessary for styling.
Apart from this, you were also suffering a bit from the default css properties added to html elements by browsers. Loading a reset.css file will help with this. A reset css declaration loads some defaults at the top of the css file that set various values to 0 to over-ride the default properties set by the browser. It gives you a more consistent and less confusing base to start styling from
float breaks out of header on zoom/lower resolutions
how it looks without zoom/res other than 1080p: http://gyazo.com/d3df8ac607362c1c5301f92307d6a636
screenshot: http://gyazo.com/4c4a0f855d312587de9553b74feea2a0
The blackish colour is actually the body...and the header colour under that is the 1000px navbar.
HTML
<div id="header">
<div id="header_content">
<div id="header_content_right">
<!-- removed form code, not needed. -->
</div>
<div id="header_content_left">
<!-- removed logo image, not needed. -->
</div>
</div>
</div>
CSS
#header {
background: #008BFF;
padding-bottom: 10px;
}
#header_content {
width: 1000px;
margin: 0 auto;
color: white;
padding-top: 10px;
}
#header_content_left {
color: white;
}
#header_content_left img {
margin-right: 15px;
}
#header_content_right {
float: right;
}
This has been resolved by moving padding-bottom: 10px; from #header to #header_content!
I'm using a sticky footer and it keeps being pushed down past the browser height, causing a large amount of whitespace to appear between my main content and the footer. When I use Firefox's inspect element tool however it appears exactly how I want it, removing the white space.
I also have a jQuery slider I'm using called nivoslider but I don't think that's having any affect on it.
Any suggestions?
HTML
<!DOCTYPE>
<html>
<head>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<title>Page Title</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/nivo-slider.css" rel="stylesheet" type="text/css" media="screen">
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 400, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Last', // Prev directionNav text
nextText: 'Next', // Next directionNav text
});
});
</script>
</head>
<body>
<div id="header">
<div class ="title">
<img src="res/title.png" id="title-img" alt=" ">
</div>
<div class="navbar">
<div class="navbar_inner">
<ul>
<li>Home</li>
<li>Events</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="wrapper">
<div id="content">
<div id="column-left" class="column">
<p>text text text text text text TEXT</p>
</div>
<div class="C-wrapper">
<div id="column-right" class="column">
<p>text text text text text text TEXT</p>
</div>
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="res/slider/slider-img1.jpg" alt="LAN" title="#caption1" data-transition="" />
<img src="res/slider/slider-img2.jpg" alt="LOL" title="#caption2" data-transition="" />
<img src="res/slider/slider-img3.jpg" alt="Starcraft" title="#caption3" data-transition="" />
</div>
</div>
<div id="caption1" class="nivo-html-caption">
<h3>Title</h3>
<p>text text text text</p>
</div>
<div id="caption2" class="nivo-html-caption">
<h3>Title</h3>
<p>text text text text text</p>
</div>
<div id="caption3" class="nivo-html-caption">
<h3>Title</h3>
<p>text text text text text</p>
</div>
<div id="column-center">
<p>text text text text text text TEXT</p>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
CSS
*{
margin:0;
padding:0;
text-decoration:none;
}
html{
height: 100%;
}
body{
height: 100%;
min-height: 100%;
background:#1010bf url(../res/bg/bg-hex.png);
}
#header{
margin: 0 auto;
width: 100%
margin-top: 10px;
}
.title{
margin: 0 auto 0 auto;
position: relative;
width: 50%;
}
.navbar{
margin-top: 20px;
margin-bottom: 35px;
padding-top: 10px;
position: relative;
min-height: 30px;
width: 100%;
background: #525454;
float: left;
border-top-color: #000;
border-top-width: 5px;
border-top-style: solid;
border-bottom-color: #000;
border-bottom-width: 5px;
border-bottom-style: solid;
}
.navbar_inner{
margin: 0 auto;
width: 50%;
}
.navbar .navbar_inner ul li{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
padding: 10px 40px;
display: inline;
}
.navbar a:link{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #059695;
}
.navbar a:visited{
color: #059695;
text-decoration: none;
font-weight: bold;
}
.navbar a:active{
text-decoration: none;
font-weight: bold;
}
.navbar a:hover{
text-decoration: none;
font-weight: bold;
color: #00f7ff;
}
.navbar a:focus{
text-decoration: none;
font-weight: bold;
padding: 40px 40px;
color: #00f7ff;
}
#wrapper{
margin: 0 auto -75px auto;
width:1100px;
min-height: 100%;
height: auto !important;
height: 100%;
}
#content{
margin: 0 auto 0 auto;
clear: both;
}
.column{
background-color: #fff;
width: 250px;
height: 500px;
}
#column-left{
float: left;
}
#column-right{
float: right;
}
#column-center{
margin: 10px 30px;
float: left;
width: 540px;
height: 240px;
background-color: #fff;
}
.C-wrapper{
clear: right;
position: relative;
}
.slider-wrapper{
margin: 0 auto;
width: 540px;
border-style: solid;
border-color: #000;
border-width: 5px;
}
.footer{
background-color: #525454;
border-top-color: #000;
border-top-width: 5px;
border-top-style: solid;
}
.footer, .push{
clear: both;
height: 70px;
}
The #wrapper div is currently set to be a minimum height of 100%; try removing that declaration, as it is likely causing the main content to be a minimum size of the entire browser window, which will naturally push all other content below the window.
I would recommend removing the min-height: 100%; and instead adding background-color: #525454; to the html in css.
Looks like this:
html {
background-color: #525454;
}
This will fill anything under the footer with that color making it fill to the end of the browser.
My portfolio reference
I also found this link if you want your footer to be a set height and stay at the bottom.
Set height footer