I'm using inline-block elements instead of floats to have a responsive box grid. When the elements are inline, the wrapper width works fine. When they shift to being vertical, the width of the wrapper expands to the width of its container instead of collapsing to the child width. Is there any hope for this?
Here's the code:
HTML:
<div class="container">
<div class="wrapper">
<div class="item item1">
<img src="http://www.noupe.com/wp-content/uploads/trans/wp-content/uploads/2010/07/th_IMG_1826s.jpg" />
</div>
<div class="item item2">
<h2>Text Div</h2>
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</div>
</div>
CSS:
img {
width: 325px;
height: auto;
}
div.container {
display:block;
width: 100%;
max-width: 1000px;
}
div.wrapper {
display: inline-block;
background: #544;
text-align: center;
padding: 15px;
}
div.item {
display:inline-block;
width: 325px;
}
If I remove the img div, the wrapper works perfectly. I feel like I'm missing something very obvious.
EDIT: Forgot the jsfiddle: http://jsfiddle.net/U3hus/13/
It's to do with the container being a fixed width and the wrapper not have a width specified. You should specify a width for the wrapper to solve the problem.
.container {
width: 1000px;
}
.wrapper {
display: inline-block;
background: #544;
text-align: center;
padding: 15px;
width: 100%;
}
Rough Example: http://jsfiddle.net/U3hus/13/
Due to the wrapper element having display:inline-block, it will expand to fill the available space. Also as know width, or max-width, is set for the wrapper it will use all the available space. The best way to resolve this would be to use media queries to set a width on your wrapper element
Related
For my class I have to have 3 divs floated left in a row with the outer two half the size of the middle one. It's driving me crazy that the rows aren't centered on the page. Is there a way to center them without getting rid of the float?
I tried creating a container div with text-align just as a shot in the dark but that didn't work. All other research I've seen is to change the float to display but I have to use float so I can't do that.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.cover {
width: 20%;
}
div.author {
width: 50%;
font-family: calibri;
}
div.links {
width: 20%;
}
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<p class="link" onclick="parent.open('https://www.britannica.com/biography/Veronica-Roth')">
https://www.britannica.com/biography/Veronica-Roth
</p>
</li>
</ul>
</div>
Your instinct to wrap the 3 "columns" in a container div is correct. This allows you to use what is commonly referred to as the "clearfix" trick. Items that are "floated" are ignored by the normal box flow of the page which is why the container seems to collapse and ignore your floating contents.
Frustrating indeed!
This is the "clearfix":
div.container:after {
content: ''; /* no content in this pseudo element */
display: table; /* be 100% wide */
clear: both; /* clear the previous floats */
}
The :after pseudo selector on the container is the same thing as putting an empty div as the last item in the container. By clearing the floats, the container will wrap around the floating items.
This is a hack... but it works! The entire web development community has used this to "fix" the difficulties inherent with using floats for years to create layouts before the advent of real layout systems like Flexbox and CSS Grid.
After the container clears the floating items inside, just set the widths so that they add up to 100% and you are good.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.container:after {
content: '';
display: table;
clear: both;
}
div.cover {
width: 25%;
float: left;
}
div.author {
width: 50%;
font-family: calibri;
float: left;
}
div.links {
width: 25%;
float: left;
}
<div class="container">
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<a href="https://www.britannica.com/biography/Veronica-Roth">
Veronica-Roth
</a>
</li>
</ul>
</div>
</div>
div.container position:relative;
div.cover float:left;
div.autor put inside tag align="center"
div.links float:right;
or
div.autor margin:5%;
or
display:inline-block;
or you can use text-align:center; in css on the parent div and then display:inline-block; on each div inside the parent div
I have these 3 div's. they are set to display inline-block in a wrapper with a width of 1000px. each div is 330px. I have some issues getting them to line up but i dont want to use float left.
How do i display them inline block?
image of my issue
All you need to do is add vertical-align to your elements. The value depends on how you want the elements to align, but you're probably looking for vertical-align: top.
Without vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
With vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
vertical-align: top;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
Hope this helps! :)
Can you share a fiddle with your code, otherwise this seems to work
<div style="width:1000px;background:#aaa">
<div style="width:330px;display:inline-block;background:#f00">
a
</div>
<div style="width:330px;display:inline-block;background:#0f0">
b
</div>
<div style="width:330px;display:inline-block;background:#00f">
c
</div>
</div>
See https://jsfiddle.net/ptornhult/xoqLgtq1/
they should automatically line up if they have space. There is something else pushing it down, see below as long as you have width they should auto line up.
.wrapper {
width: 1060px;
border: 10px solid green;
}
.inline {
border: 10px solid red;
height: 500px;
width: 330px;
display: inline-block;
}
borders have a impact on size as well so you need to have the wrapper fit borders as well (hence why my wrapper is slightly larger).
https://codepen.io/Zuriel/pen/VMmdbw
Here is a JSFiddle trying to replicate your issue.
https://jsfiddle.net/4pvebp05/
It may be that you have not set your container to be display: block?
In that case, try vertical-align: middle
We can do two different ways
Display inline-block.
<div class="inline">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.inline{
width:1000px;
}
.inline div{
display:inline-block;
width:330px;
}
https://jsfiddle.net/md25je2g/
Display flex divide three equal column
<div class="flex">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.flex{
display:flex;
width:1000px;
}
.flex div{
flex:1;
border:1px solid red;
}
https://jsfiddle.net/mL3eqvoe/
I want to vertically and horizontally center a div using the "table-cell" method because is not requiring a specific height, but unfortunately is not working without specifying a height.
Why is not working ?
I have this markup:
<section class="content-01 v-center">
<div>
<div class="container">
<div class="slogan text-center">
<h1>VERTICAL CENTERING</h1>
</div>
</div>
</div>
and this css:
.content-01.v-center {
display: table;
width: 100%;
}
.content-01.v-center>div {
display: table-cell;
vertical-align: middle;
margin-top: 0;
margin-bottom: 0;
float: none;
}
And here is a jsfiddle
Any ideas what am I doing wrong ?
Thanks!
The problem here is that the html and body tags end before the bottom of the viewport:
At the very least you would have to tell the browser that the height of the html and body elements is at least 100%:
html, body {
height: 100%;
}
As well as specifying a height for the container section:
.content-01.v-center {
/* ... */
height: 100%;
}
Here's an updated fiddle: http://jsfiddle.net/2ntK2/3/
I need inner_holder to have width of 960px and I need it to be centered. I tried using width: 960px and margin: 0px auto but it doesn't work. How can I center the divs inside inner_holder?
HTML:
<div class="parent_container">
<div class="inner_holder">
<div class="column column1">
<div class="inner_clip"></div>
</div>
<div class="column column2">
<div class="inner_clip"></div>
</div>
<div class="column column3">
<div class="inner_clip"></div>
</div>
</div>
</div>
CSS:
.parent_container {
height: auto;
margin: 15px auto;
min-height: 500px;
width: 960px;
}
.column {
float: left;
margin-right: 50px;
}
.inner_clip {
background-color: #333333;
height: 250px;
margin-bottom: 20px;
width: 250px;
}
As you can see here the "div that contains floated elements" is actually in the center (red).
I am assuming you want to center the floating elements themselves, not their parent. I'm afraid you can't do that (as far as I know). But in case you are not depending on your elements actually floating, you propably just want to display your .colum as inline-block with an text-align:center set to the parent.
Changes to your CSS:
.parent_container {
text-align:center; // added
}
.column {
display: inline-block; // added
margin: 0 25px; // added
float: left; // removed
margin-right: 50px; // removed
}
Result as Fiddle
I beat my head trying to figure this out forever.
The answer above about assigning "display:inline-block" to the elements in the div, and then assigning "text-align: center" to the parent div works
BUT BUT BUT... I had a class of "clearfix" on my parent div that apparently was mucking the whole thing up. As soon as I removed that clearfix class everything centered nicely (after hours of futile frustration, of course;).
Hope this helps someone.
I have a webpage containing a centered container with content and I want to display a logo next to it.
The layout is as following: div - container. Where the container is centered and the div lef of the container needs to fill out the width left on the screen.
html, body {
height: 100%;
width: 100%;
}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
<div id="container">
</div>
<div id="lef">
</div>
A jsfiddle with this code is available on http://jsfiddle.net/7QJQn/
This is the option that comes closed
http://jsfiddle.net/7QJQn/4/
I think that the best solution for doing something like this is just using javascript / jQuery.
Depending on which browsers you wish to support, you could use calc().
Basically, you want 50% of the viewport width (50vw) minus half of width of #container (so you're measuring from the center of your #container and you use half of all the values) - I'm assuming that you're OK with absolute positioning #lef to the viewport to keep it to the right?
CSS (fiddle here):
#lef {
background-color:yellow;
width:calc(50vw - 100px);
height:20px;
position:absolute;
right:0;
top:0;
}
Add this to your css:
#lef{
float:left
}
And change the order of the divs in the html, like this:
<div id="lef"></div>
<div id="container"></div>
First of all, you should wrap your markup in a wrapper div so elements stay tight.
I made some changes, take a look:
<div id="wrapper">
<div id="lef">
</div>
<div id="container">
</div>
</div>
And the css:
html, body {
height: 100%;
width: 100%;
}
#wrapper{
width: 360px;
}
#container {
width: 200px;
margin-left: auto;
margin-right: auto;
height: 100px;
background-color:red;
}
#lef {
background-color:yellow;
width: 160px;;
height:100px;
float: left;
}
Example
If using flexbox is an option, you can do this with the flex-grow property:
With the following markup
<div class="main-row">
<div class="filler"></div>
<div class="row-content">Fixed width centered div</div>
<div class="filler"></div>
</div>
you need to set flex-grow: 1 on the filler divs. See this fiddle.