My footer was at the bottom of the page, until I added a few more divs before it. I am not sure why this threw my code. I do not want to use position: fixed because I want it to be at the bottom, but to be seen only when scrolled down to, like the footer on this page.
.gallerybox {
border: 4px solid rgba(54, 215, 183, 1);
width:30%;
height:200px;
float:left;
margin-left:10px;
margin-bottom:10px;
}
#footer {
width:100%;
height:100px;
background-color:lightgray;
bottom:0;
left:0;
position:relative;
}
<div id="holder">
<div id="body">
<p id="gallery">The Gallery</p>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<br>
<div id="footer">FOOTER</div>
</div>
</div>
Please never use float property to position multiple div.
Use display: flex to achieve the same in the best way possible.
I think this is what you want
.container{
display:flex;
flex-direction:column;
}
.gallery{
display:flex;
flex-wrap:wrap;
}
.gallerybox {
border: 4px solid rgba(54, 215, 183, 1);
width:30%;
height:200px;
margin-left:10px;
margin-bottom:10px;
}
#footer {
width:100%;
height:100px;
background-color:lightgray;
}
<div id="holder">
<p>The Gallery</p>
<div class="container">
<div class="gallery">
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
</div>
<div id="footer">FOOTER</div>
</div>
</div>
I have included the display: flex property and removed the float: left which was creating the issue also added some subtle changes to the HTML structure.
I recommend you Learning about flexbox it will make positioning and structuring HTML with CSS so much easy and understandable.
Do tell me whether I was of any Help :)
Related
I am trying to make a sort of gallery where all my user uploaded pictures get alignd in a div which holds one more divs which holds the picture. It will be more clear in the code ;) But the last item (the child div) aligns in the middle but I want the last one to align to the left but I have tried now in hours to get this flex stuff to work and watched several tutorials on how the flex property behaves but no success :/
Here the JSFiddle:
https://jsfiddle.net/kra1b6LL/3/
#sWrapper{
position:absolute;
top:10vh;
height:75vh; /* Android Size */
height:65vh; /* iPhone Size */
width:100%;
right:0px;
left:0px;
}
#sWrapperContent{
background-color:blue;
position:absolute;
height:100%;
width:100%;
overflow: auto;
display:flex;
flex-wrap:wrap;
justify-content: space-around;
}
#sStyleBox{
border:1px solid white;
box-sizing: border-box;
height:23vh;
width:18vh;
display:inline-block;
}
Just remove the justify-content style. Elements that won't fit on the first row, will break to the second, starting on the left side. To make the code more fancy i've added some margin to the child boxes.
https://jsfiddle.net/hyv4h4fy/
#sWrapper{
position:absolute;
top:10vh;
height:75vh; /* Android Size */
height:65vh; /* iPhone Size */
width:100%;
right:0px;
left:0px;
}
#sWrapperContent{
background-color:blue;
position:absolute;
height:100%;
width:100%;
overflow: auto;
display:flex;
flex-wrap:wrap;
}
#sStyleBox{
margin:5px;
border:1px solid white;
box-sizing: border-box;
height:23vh;
width:18vh;
display:inline-block;
}
<div id="sWrapper">
<div id="sWrapperBeforeContent">
<div id="sWrapperContent">
<div id="sStyleBox">
<div id="sStyleImg"></div>
</div>
<div id="sStyleBox">
<div id="sStyleImg"></div>
</div>
<div id="sStyleBox">
<div id="sStyleImg"></div>
</div>
<div id="sStyleBox">
<div id="sStyleImg"></div>
</div>
<div id="sStyleBox">
<div id="sStyleImg"></div>
</div>
<div id="sStyleBox">
<div id="sStyleImg"></div>
</div>
<div id="sStyleBox">
<div id="sStyleImg"></div>
</div>
<div id="sStyleBox">
<div id="sStyleImg"></div>
</div>
<div id="sStyleBox">
<div id="sStyleImg"></div>
</div>
<div id="sStyleBox">
<div id="sStyleImg"></div>
</div>
</div>
</div>
</div>
Currently, my div content is in horizontal style, I want to make the another div content to be position vertically. For my case i want to vertically align my content1 element
This is how i want the css to look like
This is my html code:
<div id="binder">
<div id="content">
<div>
<h1>Title</h1>
</div>
<br/>
<div id="map">
</div>
</div>
<div id="content1">
</div>
<div id="sidebar">
</div>
</div>
This the css code:
#binder{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#content{
font:14px Calibri;
border:1px solid #3EA99F;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
#sideBar{
border:1px solid #3EA99F;
width:450px;
margin:20px;
padding:30px;
background:#3EA99F;
}
How to do it?
Eventually you can do it without using flexbox too.
Code example:
*{
box-sizing:border-box;
margin:0;
padding:0;
}
.content-wrapper,
#sidebar{
float: left;
}
.content-wrapper{
width:70%;
}
#content,
#content1,
#sidebar {
border: 1px solid red;
}
#sidebar {
width: 30%;
}
<div id="binder">
<div class="content-wrapper">
<div id="content">
<div>
<h1>Content div</h1>
</div>
<br/>
<div id="map">
</div>
</div>
<div id="content1">
<h3>
Content1 div
</h3>
</div>
</div>
<div id="sidebar">
<h3>
Sidebar div
</h3>
</div>
</div>
Notes
I added a .container-wrapper div as parent of both #content and #content1
I placed .container-wrapper and #sidebar next to each other with float:left
In this case the height of the containers is set automatically based on their content, but if you want you can specify a fixed value adding a height:..px to the corresponding class/id
change
#binder{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
to
#binder{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
as the explanation is not much enough, please check the JsFiddle and please explain if it is not as you expected
EDIT:
Thank you for providing the images.
change the html into
<div id="binder">
<div class="content-wrapper">
<div id="content">
<div>
<h1>Title</h1>
</div>
<br/>
<div id="map">
</div>
</div>
<div id="content1">
CONTENT 1
</div>
</div>
<div id="sidebar">
SIDEBAR
</div>
change the css to
#binder{
display:flex;
flex-direction: row;
}
.content-wrapper{
display:flex;
flex-direction: column;
}
#sidebar{
font:14px Calibri;
border:1px solid #3EA99F;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
check the jsFiddle for more
If we inspect the code,you will see that the div.header has height: 0px;
Look at image below:
I want my div to be the size of three elements .c1,.c2 and.c3`
How can I solve this problem?
I hope as well that we managed to explain my problem.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
</div>
</div>
CSS:
.container
{
width:100%;
height:500px;
background:red;
}
.c1
{
width:auto;
height:auto;
background:yellow;
}
.c2
{
width:auto;
height:auto;
background:gray;
}
.c3
{
width:auto;
height:auto;
background:orange;
}
.c1,.c2,.c3{width:33%;float:left;}
.header{width:70%;height:auto;margin:0 auto;background:blue;}
JSFiddle
Add overflow: auto(for example) css property to your .header class to recognize it's children's height.
JSFiddle
Use clearing divs.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
<div class='clearing'></div>
</div>
</div>
CSS:
.clearing {clear:both;}
I am having difficulties in understanding the nature of table and table-cell when used in css.
Consider the following: http://jsfiddle.net/dd7h7/3/.
HTML
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div>
<div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
CSS
.widget {
display:block;
margin:0px;
padding:0px;
}
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
}
.content {
display:table;
width:100%;
height:100%;
margin:0px;
padding:0px;
border-spacing:0;
border-collapse:collapse;
}
.icon {
display:table-cell;
width:15px;
height:15px;
margin:0px;
padding:0px;
vertical-align:middle;
text-align:center;
}
.label {
display:table-cell;
margin:0px;
padding:0px;
padding-left:3px;
vertical-align:middle;
}
Im trying to make a widget containing some buttons, that are positioned alongside each other. But I don't understand where the space between the red boxes comes from. How do I get rid of it?
Thanks
Inline elements (in your case the .button divs) are sensitive to white space, you can get rid of that space in a variety of ways, including:
Removing the space between the elements
Using HTML comments (<!-- -->) to occupy the gap
Floating the elements left
Example of removing the white space between elements:
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div><div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div><div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
jsFiddle example
Example of using HTML comments:
<div class="widget">
<div class="button">
<div class="content">
<div class="icon">A</div>
<div class="label">ABC</div>
</div>
</div><!--
--><div class="button">
<div class="content">
<div class="icon">B</div>
<div class="label">ABCDEF</div>
</div>
</div><!--
--><div class="button">
<div class="content">
<div class="icon">C</div>
<div class="label">ABCDEFGHI</div>
</div>
</div>
</div>
jsFiddle example
Example of using float:
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
float:left;
}
jsFiddle example
So in short this really doesn't have to do with display:table-cell but everything to do with display:inline and inline-block.
in this fiddle i removed the space simply using
float:left;
http://jsfiddle.net/dd7h7/5/
inline-block is adding that unnecessary space.
You can do a little trick with font size:
.widget {
display:block;
margin:0px;
padding:0px;
font-size: 0;
}
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
font-size: initial;
}
I think you should add
float:left
to
.button
so CSS should be like this
.button {
display:inline-block;
border:1px solid red;
margin:0px;
padding:0px;
float: left;
}
Hope, that will help. :)
I am trying to make my logo and manu bar to follow my page as i scroll down the page,
Currently this is what i have.
CSS is;
html,body {
background-image:url(../img/background.png);
background-size:cover;
background:fixed;
}
#bar {
margin-top:55px;
width: 1920px center;
height: 30px;
background: #2E2E2E;
border: 3.2px groove #FFD700;
}
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
#middle
{
height:10000px;
}
and for HTML:
</head>
<body>
<div id="logo">
</div>
<div id="bar">
</div>
<div id="middle">
</div>
</body>
</html>
So please what would i need to change to make both 'bar' and 'logo' follow my scroll.
thankyou for you help
Here is a jsfiddle with how I would do it...
http://jsfiddle.net/2Zqhw/
I've wrapped both elements in a div, gave it position:fixed and width:100%
You need a div to wrap your logo and bar and use CSS to set the position to fixed.
The CSS:
#nav-fixed {
position:fixed;
}
The HTML:
<div id="nav-fixed">
<div id="logo">
</div>
<div id="bar">
</div>
</div>
You could try nesting logo and bar within another div and then setting position:fixed on the enclosing div so your HTML would look something like:
<div id="fixed_bar" style="position:fixed;">
<div id="logo"/>
<div id="bar"/>
</div>
<div id="middle">
</div>
Or you could add the enclosing div as above but define the style for it in the CSS:
#fixed_bar
{
position:fixed;
}
With the HTML:
<div id="fixed_bar">
<div id="logo"/>
<div id="bar"/>
</div>
<div id="middle">
</div>