I am trying to center three images on my page. The page consists on a fixed menu on the left of the page and a div in which I want to display three photos (later it will be more photos) with float: left property on my CSS but centered horizontally, I mean that on the left and on the right of the photos have to be the same space. I want it to be responsive.
Here it is what I want:
┌───────────────────────────────────────────────────────────┐
| HEADER(The white space without anything by the moment) |
├──────────┬────────────────────────────────────────────────┤
| | DIV CONTAINER |
| | |
| | |
| | [SPACE] THE IMAGES [SPACE] |
| MENU | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
└──────────┴────────────────────────────────────────────────┘
Both spaces have to be equals.
I tried a lot of changes on my CSS to get that behaviour but I could not get it. I also take as reference the answers on this question: Align image in center and middle within div but still does not work.
Here is my actually code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<style type = "text/css">
body{
margin: 0;
}
#menu{
background-color: orange;
position: fixed;
text-align: center;
left: 0px;
top: 0px;
width: 120px;
height: 100%;
margin-top: 150px;
}
#container{
position: absolute;
left: 120px;
top: 150px;
width: 100%;
height: 100%;
text-align: center;
}
img.centeredImages{
display: inline-block;
width: 350px;
height: 200px;
float: left;
margin: auto;
}
#image1{
margin: 20px 20px;
}
#image2{
margin: 20px 10px;
}
#image3{
margin: 20px 8px;
}
</style>
</HEAD>
<BODY>
<div id = "menu">
<span class = "spanMenu"> HOME </span>
<span class = "spanMenu"> LOGS </span>
<span class = "spanMenu"> QUESTIONS </span>
</div>
<div id = "container">
<img class = "centeredImages" id = "image1" src = "https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
<img class = "centeredImages" id = "image2" src = "http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
<img class = "centeredImages" id = "image3" src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
</div>
</BODY>
</HTML>
Thanks in advance!
1.Firstly change the width of the #container :
#container {
width: calc(100% - 120px);
}
2.And after that remove the float to the images. They are display: inline-block so they will be on one line:
img.centeredImages {
float: none;
}
I hope this will help you.
I recommend using bootstrap or foundation 5.
In bootstrap:
<div class="row">
<div class="col-md-3"><img src=""></div>
<div class="col-md-3"><img src=""></div>
<div class="col-md-3"><img src=""></div>
<div class="col-md-3"><img src=""></div>
</div>
you can add xs, lg, xl later if you want.
In foundation5:
<div class="row">
<div class="medium-3 columns offset-1"><img src=""></div>
.
.
.
</div>
you can also use block grid which is made for troubles like yours :).
By adding a display: inline-block to all the images and then text-align: center to the container element, the images will all take up the same space and be horizontally centered.
However, since you want each image to be centered horizontally but on a new line I would add display:block to the images, along with position:relative and left: 50%. Finally, I would add a negative margin on the images which would look like margin-left: -[insert half of your image width].
Hope this helps.
You can easily achieve that by wrapping each image in a container:
.image-wrapper{
width: 100%;
float: left;
}
.image-wrapper img{
width: 100%;
max-width: 350px;
max-height: 200px;
margin-bottom: 20px;
}
<div class="image-wrapper">
<image ... />
</div>
Have a look at this example:
body {
margin: 0;
}
#menu {
background-color: orange;
position: fixed;
text-align: center;
left: 0px;
top: 0px;
width: 120px;
height: 100%;
margin-top: 150px;
}
#container {
position: absolute;
top: 150px;
left: 120px;
text-align: center;
}
.image-wrapper img {
width: 100%;
max-width: 350px;
max-height: 200px;
margin-bottom: 20px;
}
.image-wrapper:last-child img {
margin-bottom: 8px;
}
.image-wrapper {
width: 100%;
float: left;
}
<div id="menu">
<span class="spanMenu"> HOME </span>
<span class="spanMenu"> LOGS </span>
<span class="spanMenu"> QUESTIONS </span>
</div>
<div id="container">
<div class="image-wrapper">
<img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
</div>
<div class="image-wrapper">
<img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
</div>
<div class="image-wrapper">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
</div>
<div class="image-wrapper">
<img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
</div>
<div class="image-wrapper">
<img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
</div>
<div class="image-wrapper">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
</div>
<div class="image-wrapper">
<img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
</div>
<div class="image-wrapper">
<img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
</div>
<div class="image-wrapper">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
</div>
</div>
To have more images aligned on the same row change the width of .image-wrapper, and have a look at CSS media queries to obtain a better responsive result on different devices and screen sizes.
Related
I admit it... I'm struggling with this one... I'm trying to make a responsive page with 4 stacked divs.
All divs are width: 100%
The header div: I want the text to display at the bottom of the div (this would be a slogan) so it appears closer to the image.
The image div: I want the image centered vertically and horizontally in the div.
The button div: I want the button (logon) at the top of the div so it appears closer to the image.
The footer div: I want to be at the absolute bottom of the page no matter what.
+-----------+
| |
| |
| Header |
+-----------+
| |
| Image |
| (75%x75%) |
| |
+-----------+
| Button |
| <a link |
| |
+-----------+
+-----------+
| Footer |
+-----------+
On an iPad what I have seems to work but when I load it on a device with a smaller screen (android or iPhone 4/5) it all crumbles...
My HTML:
<div id="welcomePage">
<div class="welcome">
<div class="welcome_header">
<h1 class="welcome">Welcome Slogan</h1>
</div>
<div class="welcome_image">
<img src="logo.svg">
</div>
<div class="welcome_button">
<input type="button" value="Get Started Now!">
<p>Already have an account? Login here</p>
</div>
<div class="welcome_footer">
<h3>© 2018 BlahBlah, Inc.</h3>
</div>
</div>
</div>
My CSS:
.welcome {color: #5e87b0; height:100%; }
.welcome_header {width: 100%; height: 25%; min-height: 25%; display: table-header; vertical-align: text-bottom;}
.welcome_header h1{font-size:6vh;}
.welcome_image {width: 100%; margin-left: 0px; position: absolute; top: 50%; transform: translateY(-50%); }
.welcome_image img {border: 0; width: 75%; height: 75%;}
.welcome_button {width: 100%; height: 20%; position: absolute; clear: both; position:absolute; bottom:5%; left:0;}
.welcome_button h3 {transform: translateY(100%); bottom:0; text-align: center;}
.welcome_footer {width: 100%; height: 5%; position: fixed; clear: both; bottom: 10px; left:0;}
.welcome_footer h3{font-size:1vh;}
What am I missing (besides modern css skills ;-) )?
You can easily stack them with flex
#welcomePage {
display: flex;
flex-direction: column;
}
#welcomePage div {
flex: 1 1 auto;
}
This question already has answers here:
Two column layout with left fluid and right fill the rest width
(4 answers)
Closed 6 years ago.
I need to do a layout in this way:
----------------------
| header |
----------------------
| N | |
| A | CONTENT |
| V | |
|-----| |
| | ----BAR---- |
|EMPTY| |
| | |
----------------------
I want the overall width to be 100% of the body,
the navigation has width 15% but min-width 120px.
The width of the bar (that is an element in the content div) has to be 100% of the content div.
In the html I have the limitation that the navigation div has to go before the content div.
EDIT:
My code in the html is
<div id="main">
<div id="header"></div>
<div id="nav"></div>
<div id="content><p id="bar">Title of paragraph</p></div>
</div>
The code i have in the css right now is:
#nav {
float: left;
width: 15%;
min-width: 120px;
}
#content{
float: right;
}
#bar {
display: block;
background-color: #D2DEE4;
}
Could you help me please?
I like the flexbox method more, however keep in mind this doesn't work with IE9 and below.
Flex-basis (aka flex: {shrink} {grow} {flex-basis}) is required because flex doesn't work well with css widths.
*{
margin: 0;
padding: 0;
}
header{
padding: 10px;
width: 100%;
background: #888;
}
.sidebar{
padding: 10px;
flex: 0 0 120px;
background: #07f;
}
.content{
padding: 10px;
background: #ddd;
width: 100%;
}
.container{
display: flex;
flex-direction: row;
}
<header>
This is the header
</header>
<div class="container">
<div class="sidebar">
This is the sidebar
</div>
<div class="content">
This is the content
<br>
test
</div>
</div>
This method is static and doesn't allow for percentages (you'd have to use media queries for other screen sizes.)
*{
margin: 0;
padding: 0;
}
header{
padding: 10px;
width: 100%;
background: #888;
}
.sidebar{
box-sizing: border-box;
float:left;
background: #06f;
display:block;
width: 120px;
padding: 10px;
}
.content{
box-sizing: border-box;
padding: 10px;
display:block;
background:#ddd;
margin-left: 120px;
}
<header>This is the header</header>
<div class="sidebar">
This is the sidebar
</div>
<div class="content">
This is the content
<br>
test
<br>
test
<br>
test
</div>
Alright, here's my problem: I've got a Div with a logo in it floated left, and a div with a menu in it floated right. When they touch, the menu drops to a new line, and I'd like them to be forced to stay on a single line, with the logo getting smaller instead.
| |
| +---------------+ |
|<---| logo |---> |
| | variable width| +----------------------------------------+ |
| | float left | | Menu | |
| | | | fixed width based on content | |<----->
| | | | float right | |
| | | +----------------------------------------+ |
| +---------------+ |
| |
The layout is basically:
<div class="Container">
<div class="Logo">
<a>
<img></img>
</a>
</div>
<div class="MenuContainer">
<div class="MenuInnards"></div>
</div>
</div>
Thanks for any help!
you can use "display:table" to solve the problem. By using this code you can also vertically center the content (as you show in your scheme).
HTML
<div class="Container">
<div class="Logo">
<a>
<img></img>
</a>
</div>
<div class="MenuContainer">
<div class="MenuInnards"></div>
</div>
</div>
CSS
.Container{max-width: 800px; width: 100%; display:table;}
.Logo{display:table-cell; vertical-align:middle}
.Logo a img{width: 100%; max-width: 200px}
.MenuContainer{vertical-align:middle; display:table-cell; width:400px;}
.MenuInnards{float:right;}
Try this
HTML
<div id="holder">
<div id="left">
<a><img/></a>
</div>
<div id="right"></div>
</div>
CSS
#holder {
width: 960px;
height: 300px;
background-color: green;
margin-left: auto;
margin-right: auto;
}
#left {
width: 248px;
height: 130px;
background-color: yellow;
float: left;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
}
#right {
width: 640px;
height: 70px;
background-color: red;
float: right;
margin-top: 70px;
margin-left: 10px;
margin-right: 20px;
}
I am trying to produce the following, basically a page broken six pieces
__________
| | | |
| | | |
|__|__|__|
| | | |
| | | |
| | | |
----------
But what I'm getting looks like this:
__________
|__|__|__|
|__|__|__|
| | | |
| | | |
| | | |
| | | |
----------
Here is the css:
.paginationPage {
height: 110px;
width: 82px;
margin: 2px;
background: #F9F9F9;
border: 1px solid #CCCCCC;
}
#insertionGrid {
position: relative;
height: 100%;
width: 100%;
}
#odds, #evens {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#odds {
z-index: 1;
}
#evens {
z-index: 2;
}
.insertionBlock {
float: left;
}
.oneSixth {
height: 50%;
width: 33%;
}
.oneEigth {
height: 25%;
width: 50%;
}
And here is the HTML:
<div class="paginationPage">
<div id="insertionGrid">
<div id="odds">
<div>
<div id="o1" class="oneSixth insertionBlock"> </div>
<div id="o2" class="oneSixth insertionBlock"> </div>
<div id="o3" class="oneSixth insertionBlock"> </div>
</div>
<div>
<div id="o4" class="oneSixth insertionBlock"> </div>
<div id="o5" class="oneSixth insertionBlock"> </div>
<div id="o6" class="oneSixth insertionBlock"> </div>
</div>
</div>
</div>
</div>
paginationPage is 110px and inside things are height 100%, except oneSixth class which is 50%. So why is the oneSixth div taking up something like 10% not 50%?
You have the right idea. You just need to get rid of the <div> tags around o1,o2,o3 and around o4,o5,o6. The o divs will automatically fit and fill into the second row, so you don't need them. If you have those div tags in there, you are fitting your o1,o2,o3 to it's parent div, and that's why they get smaller than you think they should.
See for a working example. I added a border so it's easier to see.
http://jsfiddle.net/WD79x/1/
Here's one method, using position:absolute.
Demo
HTML
<div class="paginationPage">
<div id="insertionGrid">
<div class="top">
<div id="o1" class="oneSixth insertionBlock"> </div>
<div id="o2" class="oneSixth insertionBlock"> </div>
<div id="o3" class="oneSixth insertionBlock"> </div>
</div>
<div class="bottom">
<div id="o4" class="oneSixth insertionBlock"> </div>
<div id="o5" class="oneSixth insertionBlock"> </div>
<div id="o6" class="oneSixth insertionBlock"> </div>
</div>
</div>
</div>
CSS
.paginationPage {
height: 110px;
width: 82px;
margin: 2px;
background: #F9F9F9;
border: 1px solid #CCCCCC;
position:relative;
}
.oneSixth {
width:33.33333%;
position:absolute;
}
.top .oneSixth:nth-child(even),
.bottom .oneSixth:nth-child(odd) {
background-color:red;
}
.top .oneSixth:nth-child(odd),
.bottom .oneSixth:nth-child(even) {
background-color:blue;
}
.oneSixth:nth-child(1) {
left:0;
}
.oneSixth:nth-child(2) {
left:33.33333%
}
.oneSixth:nth-child(3) {
right:0
}
.top .oneSixth {
top:0;
bottom:50%;
}
.bottom .oneSixth {
top:50%;
bottom:0;
}
#Brian Ray was right.
"However, I'm going to guess that it has to do with the container of the .oneSixth divs having no height set. Since percentage heights are based on the heights of their parents, the s with no class should have their heights set to 50% and the .oneSixth divs should have their heights set to 100%."
I'm going round in circles with a CSS layout. I basically want it like:
<-------><-------------->
<------><------>
400px 50% 50%
So its 3 colums, one fixed size, and the other two taking up 50% each of the remaining space. I cant seem to make the second and third take up 50% of the remaining space.
Any help would be greatly appreciated,
thanks very much :)
I tried a couple of variations. Below works in Chrome 2, Firefox 3.5 and IE8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>NLR</title>
<style type="text/css">
html, body, div { margin: 0; border: 0 none; padding: 0; }
div { height: 500px; border-collapse: collapse; }
#wrapper { padding-left: 400px; }
#nav { width: 400px; margin-left: -400px; float: left; background: yellow; }
#main { overflow: hidden; background: blue; }
#left { float: left; width: 50%; background: red; height: 300px; }
#right { float: right; width: 50%; background: green; }
</style>
</head>
<body>
<div id="wrapper">
<div id="nav"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
the markup:
<div id="left">some content</div>
<div id="main">
<div>more content</div>
<div>still more content</div>
</div>
the css:
#left {
float: left;
width: 400px;
margin-right: -405px; /* throwing in a little extra */
}
#main {
margin-left: 405px; /* matching the margin of #left */
}
#main > div {
width: 50%; /* may need to make it 49.9% for some browsers */
}
Your best bet would be to have it set up like so:
Wrappers are pretty important and make a lot of things much easier. To center things inside of wrappers, you can set margin left/right of the divs inside of the wrappers to "auto".
<div class="bigwrapper">
<div class="400pxdiv">
Content for 400pxdiv
</div>
<div class="rightwrapper">
<div class="50percent1">
50percent1's content
</div>
<div class="50percent2">
50percent2's content
</div>
</div>
</div>
First of all it's always a good practice to WRAP your layout. In the following example:
+---------------BODY-----------------+
|<---DIV#1---><--------DIV#2-------->|
| <---DIV3--> | <--DIV4--><--DIV5--> |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | |__________________| |
| |_________| | |____CLEAR DIV_____| |
+-----------------------------------+
DIV0 : main-wrapper
DIV1 : sidebar-wrapper
DIV2 : content-wrapper
DIV3 : sidebar-content
DIV4 : content-left
DIV5 : content-right
CLEAR DIV: to clear the floats.
This works for me in Firefox.
<!DOCTYPE html>
<title>Test</title>
<style>
#A { width: 400px; float:left; outline: thin solid pink; }
#B { margin-left: 400px; overflow: hidden; outline: thin solid pink; }
#B1, #B2 { width:50%; float:left; outline: thin solid pink; }
</style>
<div id=A>
A
</div>
<div id=B>
<div id=B1>
B1
</div>
<div id=B2>
B2
</div>
</div>