I have three images. The need to be aligned so they fit on the same line and are centered. I have managed to align the 1st and 3rd image using float: left; and float: right; but I'm struggling to align the center image.
Here's the involved code:
.postprojects {
margin-top: 60px;
padding-left: 35px;
padding-right: 35px;
padding-top: 35px;
background-image:url('image/bgprojects.png');
width: 889px;
height: 300px;
}
.postproject1 {
float: left;
overflow: hidden;
}
.postproject2 {
float: left;
overflow: hidden;
}
.postproject3 {
float: right;
overflow: hidden;
}
Any suggestions?
(P.S. Disregard the weird clipping on the bottom of the site. It's a padding error)
Try this code, may be:
.postproject2 {
float: left;
overflow: hidden;
margin: 73px 10px 0;
}
Fiddle: http://jsfiddle.net/praveenscience/eFK7F/2/
Related
I have two boxes inside my <header>-tag, which has a total width of 100%. When i align them up they fit perfect, but when i'm shrinking the window the right box jumps down beneath the left one. Here's the code:
header {
width: 100%;
height: 90px;
}
#head {
float: left;
background-image: url('img/header.jpg');
height: 120px;
margin-right: 10px;
width: 65%;
}
#userinfo {
float: left;
height: 100px;
width: 33.2%;
background-color: #202020;
padding: 10px;
position: relative;
}
<header>
<section id="head">
</section>
<section id="userinfo">
test
</section>
</header>
Any quick fixes? Imagining this happens with the rest of my design as I'm moving forward. Thanks in advance.
The problem here is you are using some values for padding and margin on your elements and those by default are added to the actual size of the element, since both elements are 98.2% of the container +20 of the values at some point they don't fit into the 100% and will break.
To solve it you can use box-sizing property which will make the padding and border values be inside the total declared size, and since that doesn't work with margin you will need an extra container to use padding and create the separation:
header {
width: 100%;
height: 90px;
}
#head {
float: left;
box-sizing:border-box;
padding-right: 10px;
width: 65%;
}
#head > div {
background-image: url('http://placehold.it/500');
height: 120px;
}
#userinfo {
box-sizing:border-box;
float: left;
height: 100px;
width: 35%;
background-color: #202020;
padding: 10px;
position: relative;
}
<header>
<section id="head">
<div></div>
</section>
<section id="userinfo">
test
</section>
</header>
Thanks DaniP, that solved it. But what about the content and sidebars part then?:
#container {
margin: 30px auto;
width: 70%;
min-height: 400px;
}
#leftmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #202020;
}
#content {
float: left;
box-sizing: border-box;
width: 60%;
background-color: #202020;
min-height: 600px;
}
#content > div {
background-color: #202020;
min-height: 600px;
}
#rightmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #202020;
}
I am working with this demo: http://blog.templatemonster.com/demos/coding-a-responsive-lightbox-image-gallery-for-website-portfolios/demo/index.html
From here: http://blog.templatemonster.com/2014/05/20/coding-responsive-lightbox-gallery-portfolios-tutorial/
Is there a way to center the thumbnails? It looks like the right is off by about 25px.
Remove the float, set to inline-block instead.
Give the margin 10px to the left and 10px to the right instead of a flat 20px to the right.
From:
#portfolio li {
display: block;
float: left;
width: 30%;
max-width: 400px;
margin-right: 20px;
margin-bottom: 20px;
}
To:
#portfolio li {
display: inline-block;
float: none;
width: 30%;
max-width: 400px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
}
I am trying to have a page divided in 3 columns. The one in the middle will contain the "content" while the other ones will contain a menu and, for this reason, I'd like to have the lateral columns fixed while the user (vertically) scrolls the page.
The code works on Chrome and on Internet Explorer but on Firefox the column on the left collapse over the column on the right and I can't figure out why.
Here's the code (if you open it on different browser you can notice the difference):
http://jsfiddle.net/mattyfog/6rn3j/4/
HTML
<div id="left-col">LEFT</div>
<div id="main">MAIN</div>
<div id="right-col">RIGHT</div>
CSS
#main {
width: 50%;
display: inline-block;
float: left;
padding-left: 25%;
background-color: grey;
}
#right-col {
float: left;
background-color: yellow;
}
#left-col {
float: right;
background-color: blue;
}
#right-col, #left-col {
position: fixed;
width: 25%;
min-width: 140px;
margin: 0px;
display: inline-block;
}
Thank you guys
I'm not sure why Firefox is acting strange but I think the correct way to do what you want is something like this:
I removed float from #main and changed its padding-left to margin-left and now it's working in on browsers (fiddle).
#main {
width: 50%;
display: inline-block;
/*float: left;*/
margin-left: 25%;
background-color: grey;
}
#right-col {
float: right;
background-color: yellow;
}
#left-col {
float: left;
background-color: blue;
}
#right-col, #left-col {
position: fixed;
width: 25%;
min-width: 140px;
margin: 0px;
display: inline-block;
}
This is a two part question, I believe, with a third and fourth, bonus twist.
What am I doing wrong to get the height of the purple set to 100% to be a little bit too high?
How can I set the width of the purple so that it goes 100% of the remaining space?
Is the only way to get rid of the spacing between the yellow and the purple to alter the HTML code by putting everything on the same line?
How can I remove the margin that the green border holds between self and the outer component?
jsfiddle.net/jL8e5/1/
div.faqticleList {
background: #ffdd00; /* yellow */
display: inline-block;
padding: 3px;
width: 200px;
height: 150px;
}
div.faqticlePreview {
background: #bb88ff; /* purple */
display: inline-block;
padding: 3px;
width: auto;
height: 100%;
}
I'm not sure if I completely understand your goals. I assumed:
Fixed width left
Variable width right
http://jsfiddle.net/wXme4/
CSS
body{
margin: 0;
padding: 0;
width: 100%;
}
div.faqticleList {
background: #ffdd00;
width: 200px;
height: 100%;
float: left;
}
div.faqticlePreview {
background: #bb88ff;
width: 100%;
height: 100%;
margin-left: -203px;
padding-left: 203px;
}
div.container {
border: solid 1px #007700;
margin: 0px;
height: 100px;
//overflow: hidden;
//overflow: auto;
}
div.faqticleList div, div.faqticlePreview div {
padding: 3px;
}
Script
document.getElementById("faqticleList").innerHTML = "<div>faqticleList</div>";
document.getElementById("faqticlePreview").innerHTML = "<div>faqticlePreview</div>";
Updated Demo
Float the left column, and make the right column a regular block element with overflow: hidden. That might be the simplest way to do it.
CSS
div.faqticleList {
/* display: inline-block; */
float: left;
...
}
div.faqticlePreview {
/* display: inline-block; */
/* width: auto; */
overflow: hidden;
...
}
This will do what you want, but I would recommend you set your height to fixed, or it wont work,
div.faqticleList {
background: #ffdd00;
display: inline-block;
width: 30%;
height: 150px;
}
div.faqticlePreview {
background: #bb88ff;
display: inline-block;
width: 69%;
height: 100%;
clear: both;
}
div.container {
border: solid 1px #007700;
margin: 0px;
height: 100%;
//overflow: hidden;
//overflow: auto;
display: block;
clear: both;
}
You can use jquery to dynamically find the width.
JS:
document.getElementById("faqticleList").innerHTML = "faqticleList";
document.getElementById("faqticlePreview").innerHTML = "faqticlePreview";
var difWidth = $('.container').width() - 212;
$('#faqticlePreview').css( "width", difWidth )
Then, in your CSS, remove the width from faqticlePreview and float the other div left:
div.faqticleList {
background: #ffdd00;
display: inline-block;
padding: 3px;
width: 200px;
height: 150px;
float: left;
}
div.faqticlePreview {
background: #bb88ff;
display: inline-block;
padding: 3px;
height: 100%;
}
Updated jsfiddle:
http://jsfiddle.net/a2Run/
Note: The width you are subtracting needs to be 212. 200px width from the first div, plus 3px of padding on each side of both divs 200+(3x4)=212
I'm working on a web site and im having trouble with the left navigation. As you can see here http://animactions.ca/test/Desktop/
the left navigation menu does not go to the bottom, it stops after the content. I would need it to stop at the bottom of the page.
Here is the css:
/* CSS layout */
body {
margin: 0;
padding: 0;
}
#masthead {
}
#top_nav {
width: 700px;
background-color: #DDDDDD;
margin-right: auto;
margin-left: auto;
}
#container {
width: 700px;
margin-right: auto;
margin-left: auto;
}
#left_col {
width: 95px;
float: left;
background-color: #B79F63;
border-right: 5px solid #976F43;
}
#page_content {
width: 600px;
float: right;
background-color: #D2C388;
}
#footer {
clear: both;
width: 700px;
text-align: center;
background-color: #E0E0E0;
margin-right: auto;
margin-left: auto;
}
Thanks
One way around this is to create a background image for the div containing the navigation and the main content (in your code it's "container") that mimicks the background colors and separation lines you want for the columns. It can often be as small as 1px high but should be the width of the container, and will repeat down the page.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://www.cssnewbie.com/equal-height-columns-with-jquery/