I have some divs holidng images I want to display.
They are within a centered container.
This container has a variable width so depending on your browser size you have either 3 or 4 images in a row before they go flow into the next row. I want to have thoses images centered in the container elment. My problem now is, that this container element is always 100% so but the inside image divs do not fill it. I need the inner divs to expand the out div, so it is only as wide as all the 3 or 4 images and their margin.
My html is:
<div id='team'>
<div class='item-container'>
<div class='item'>
<img src='small.jpg' alt='' />
</div>
</div>
<div class='item-container'>
<div class='item'>
<img src='small.jpg' alt='' />
</div>
</div>
</div>
My css is:
#team{
margin: 20px 0px;
padding: 20px 0;
position: relative;
float: left;
}
#team .item-container{
position: relative;
float: left;
width: 230px;
height: 180px;
margin: 2%;
}
Anyone any ideas? If you do not get what I mean, please ask so I can describe it in more detail. Thanks in advance.
You can switch to using display: inline-block instead of float: left on the .items, and then text-align: center on #team to center:
See: http://jsfiddle.net/gGc76/8/ - (be sure to try resizing the window)
You possibly don't want float: left on #team, but I'm not sure what you're doing.
#team {
margin: 20px 0;
padding: 20px 0;
position: relative;
float: left;
background: #ccc;
text-align: center
}
#team .item-container {
vertical-align: top;
display: inline-block;
/* if you need ie7 support */
*display: inline;
zoom: 1;
position: relative;
width: 230px;
height: 180px;
margin: 2%;
background: #eee
}
Related
I have this code here:
https://jsfiddle.net/pj1zmL6j/
I'm trying to get the loginbox to stay on the same Y as the logo. I've tried different ways with float and display-inline and other results I've found with google, but when setting float or display:absolute on the logo, it disappears to the left instead(but the logobox doesn't get pushed down)
Code:
#top {
width: 100%;
}
#head {
float: left;
width: 694px;
margin: auto;
text-align: center;
}
#user {
width: 25%;
float: right;
margin: 0 25px 0 25px;
border: 1px solid white;
display: inline-block;
}
<div id="top">
<div id="head">
<h1>logo</h1>
</div>
<div id="user">loginbox</div>
</div>
Try adding
display: flex;
align-items: center;
To the #top id
Example : https://jsfiddle.net/zpo4gf75/2/
Edit
I tried making the Logo stay in the center all the time.
Check the fiddle: https://jsfiddle.net/tksL54g0/2/
The problem is your use of fixed and dynamic widths (percents).
Here is an example of only use percents to achieve your goal: https://jsfiddle.net/v1wvyc1v/
#top {
width: 100%;
}
#head {
float: left;
width: 75%;
text-align: center;
}
#user {
width: 25%;
float: right;
}
When you have a fixed width, fixed margin and fixed border sizes added you will run into issues. All of these were causing your login box to wrap below.
I'm working on my portfolio site and having trouble getting my divs to size together.
Here it is: I have one body div, inside there are two child divs.
The body div should have max-height 100%, max-width: 100% so that it doesn't exceed the browser window.
The left div contains an image which I want to scale to the parent body div (max-height 100%, max-width 70%).
The right div contains text about the image, it needs to scale to the height of the left div (there is also footer that sits at the bottom of this div).
This shouldn't be so hard, its almost working but right now my image container (left div) is not being contained to the body div.
html,
body {
height: 100%;
}
.Info {
float: left;
width: 25%;
padding-left: 15px;
padding-top: 10px;
/*margin-left: 78%;*/
border-left: 1px black solid;
/*position: absolute;*/
}
.InfoText p {
margin-top: -10px;
}
div img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
box-shadow: 5px 5px 15px #888888;
}
.ImageContainer {
float: left;
height: 100%;
max-width: 70%;
padding-right: 15px;
position: relative
}
section.ImageContainer img {
float: left;
object-fit: cover;
}
#SideQuote {
margin-top: 30px;
}
.StuffInBody {
position: relative;
padding-top: 15px;
float: left;
display: flex;
}
footer p {
position: absolute;
bottom: 0%;
margin: 0;
}
<div class="StuffInBody">
<div class="ImageContainer">
<img class="contained" src="images/TheGMODebate copy.jpg" alt="" />
</div>
<div class="Info">
<div class="InfoText">
<p>ILLUSTRATION</p>
<p>Title: <em>The GMO Debate</em>
</p>
<p>Media: Gouache</p>
<div id="SideQuote">
<p class="ClickToEnlarge">Full screen image click here.
</p>
</div>
<footer>
<p>© Brooke Weiland 2015</p>
</footer>
</div>
</div>
</div>
It's very hard to make a reliable interface using floats.
It changes default behaviour and put your element outside of the flux.
You should be able to do what you want using only flex.
The property box-sizing: border-box also makes miracles (margin and padding easier to manage).
Also, the object-fit property is not enough supported by browsers to be used now IMHO.
http://caniuse.com/#feat=object-fit
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
I have a <div> called "bottom" which holds 2 divs together. The 2 divs inside are "manufacturers" and "main" which are located side by side with each other. What I want is that the <div id="bottom"> must be auto resizable when either the two divisions expands (the <div id="main"> lists down all the available products that is why it also has an auto height). The problem is that when I use a float property or a "display: inline" property in the main and manufacturers divs it overrides the bottom div causing it not to expand.
here's my css code:
#bottom{
padding: 1.5em;
margin: auto;
margin-top: 3.7em;
margin-bottom: 5em;
background-color: white;
width: 67em;
height: auto;
}
#manufacturers{
padding: 1em;
width: 13em;
height: auto;
border: 1px solid #CFCFCF;
font-size: 17px;
float: left;
}
#main{
float: right;
padding: 0.5em;
width: 47em;
height: 10em;
background: blue;
position: relative;
display: inline;
}
In your case element with ID "bottom" collapsed because of elements inside have floats (left or right). You should use clearfix class with #bottom:
.clearfix: before,
.clearfix: after {
display: table;
content: " "
}
.clearfix: after {
clear: both
}
Answer to question about "clearfix"
#main{
display: inline-block;
}
you could try this:
#bottom{
width: 100%;
}
#manufacturers{
width: 50%;
}
#main{
width: 50%;
}
Add above css properties in your existing CSS stylesheet. Apart from it:
Expanding Downward to fit the content is the expected behavior. If you have specified floats somewhere in your style you may need to clear them.
<div style="clear:both"></div>
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO