It's my understanding that simply adding display:inline to divs with a relative position will line them up (left to right), somewhat like float:left. I've tried both approaches but they haven't worked.
Below is an example of my last attempt, using inline displaying. I want all three segments to line up from left to right, but they're displaying just like unstyled divs.
function showProfile() {
var profile = document.getElementById('userprofile');
profile.style.opacity = 0.8;
var profileImage = document.getElementById('userimage');
profileImage.style.opacity = 0.8;
}
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
opacity: 0;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
opacity: 0;
width: 100px;
height: 100px;
}
.miniBioSegment {
display: inline;
margin-right: 5px;
width: 33%;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
<button onclick="showProfile()">View Profile</button>
You should use inline-block instead of inline for more control. I used a width of 33%-2px because the browser rounds the div's size up therefore leading to overflowing. Your 5px margins weren't helping with the sum either.
function showProfile() {
var profile = document.getElementById('userprofile');
profile.style.opacity = 0.8;
var profileImage = document.getElementById('userimage');
profileImage.style.opacity = 0.8;
}
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
opacity: 0;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
opacity: 0;
width: 100px;
height: 100px;
display:inline-block;
}
.miniBioSegment{
display: inline-block;
width: calc(33% - 2px);
vertical-align:middle;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
<button onclick="showProfile()">View Profile</button>
CSS should target the ID's and use float:left. See example
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
float:left;
max-width: 33%;
height: 100px;
}
#miniBio {
float:left;
margin-right: 5px;
width: 33%;
}
#miniQuote {
float:left;
margin-right: 5px;
width: 33%;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
I'm asking myself, why do you have position:absolute;?
To make it work, I have just added display: flex; justify-content: space-between; to the .profileclass.
Remove the position, and try adding the last two lines.
See example here: http://sandbox.clickadelic.de/demos/lineup.html
With the divs set to display: inline; they will only line up horizontally if the total length of the divs does not exceed the container's width.
And width, height of inline elements is ignored, you should use display: inline-block; instead. The wrapping behavior is the same as above.
Also browser renders whitespace among inline* elements, which is about 4px, see How to remove the space between inline-block elements? for more details.
In your example, there are 3 divs, if you want them to be equal width, you can do:
.profile {
font-size: 0; /*remove whitespace*/
background: silver;
}
.miniBioSegment {
font-size: 16px; /*reset font-size*/
display: inline-block;
vertical-align: top; /*vertical alignment*/
width: 33.3333%;
}
However, the image object in the first div is set to 100px, I think you would prefer that div to be the same width too, and each one takes 50% of the rest space for other two divs. Examples:
1. Inline block
jsFiddle
.profile {
font-size: 0;
background: silver;
}
.miniBioSegment {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
}
#miniBio, #miniQuote {
width: calc((100% - 100px) / 2);
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
2. Float
jsFiddle
.profile {
background: silver;
}
.profile:after {
content: "";
display: table;
clear: both;
}
.miniBioSegment {
float: left;
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
}
#miniBio, #miniQuote {
width: calc((100% - 100px) / 2);
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
3. CSS table
jsFiddle
.profile {
background: silver;
display: table;
border-collapse: collapse;
width: 100%;
}
.miniBioSegment {
display: table-cell;
vertical-align: top;
border: 1px dotted red;
}
#miniBio, #miniQuote {
width: 50%;
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
4. Flexbox
jsFiddle
.profile {
background: silver;
display: flex;
}
.miniBioSegment {
border: 1px dotted red;
}
#miniBio, #miniQuote {
flex: 1;
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
Related
My sandbox on JSFIDDLE
When 'OPEN' is clicked, the content div should expand to full width, but it ended up expanding by 100px width like on the red box. I tried to set width: 100%, in the gray box div and it didn't work.
In the .content class, I had the width set to 100vw without margin: 0 auto and it expanded 100% width to the right side, not screen-fulled size.
[]
I'm testing this function before I deploy it on my website.
jQuery -
$(".openit").on("click", function() {
$(".expandBG").toggleClass("content");
$(".openit").hide();
$(".closeit").show();
$(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
$(".expandBG").toggleClass("content");
$(".openit").show();
$(".closeit").hide();
$(".text").hide();
});
HTML -
<div class="wrapper">
<div class="back">BG
<div class="expandBG">
<div class="openit">OPEN</div>
<div class="flex-col">
<div class="closeit">CLOSE</div>
<div class="content text" style="display: none;">
<div>(CONTENT HERE)</div>
</div>
</div>
</div>
</div>
</div>
CSS -
body {
background-color: #000;
}
.wrapper {
width: 100%;
margin: 0 auto;
text-align: center;
border: solid red 1px;
}
.back {
position: relative;
color: #fff;
width: 110px;
height: 110px;
background-color: red;
margin: 0 auto;
text-align: center;
display: block;
}
.expandBG {
display: block;
width: 100px;
height: 100px;
transition: ease 0.3s;
background-color: #192D38;
overflow: hidden;
margin: 0 auto;
bottom: 0;
text-align: center;
font-family: sans-serif;
color: #fff;
position: relative;
}
.flex-col {
flex-direction: column;
}
.openit {
display: block;
text-align: center;
height: 100%;
cursor: pointer;
margin: 0 auto;
}
.closeit {
display: block;
text-align: center;
cursor: pointer;
width: 100%;
margin: 0 auto;
z-index: 1;
position: relative;
}
.text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -25px;
}
.content {
width: 100%;
height: 50vw;
position: relative;
margin: 0 auto;
}
It's because of the div with a class name back. increase the width of that div to 100% when opneit is clicked and then back to its original size when closeit is clicked.
// add this to your CSS file
.w-full {
width: 100%
}
then include these two lines in your javaScript file
$(".openit").on("click", function() {
$(".back").addClass("w-full"); // This line has been added to your code.
$(".expandBG").toggleClass("content");
$(".openit").hide();
$(".closeit").show();
$(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
$(".back").removeClass("w-full"); // This line has been added to your code.
$(".expandBG").toggleClass("content");
$(".openit").show();
$(".closeit").hide();
$(".text").hide();
});
Not sure, but I am currently not able to figure out. I'm trying to center the inner div (blue transparent one) from the parent (with the red background) inside the background. As an example, they're technically in each other perfectly at the first example in the snippet.
At the second example however I've added padding: 5px; to both of them to the red and blue one. To the blue one because I wanted to inherit the width some how.
https://jsfiddle.net/L8enbcy3/
.box-1-1 {
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box-1-2 {
width: 50px;
height: 50px;
background: #0000ffb0;
position: relative;
}
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 50px;
height: 50px;
background: #0000ffb0;
padding: 5px;
}
<div class="box-1-1">
<div class="box-1-2"></div>
</div>
<pre>
</pre>
<div class="box1">
<div class="box2"></div>
</div>
What I'm trying is to get "box2" centered into "box1" like example 1 but with its padding, so that's covered by blue. without having to position: absolute it, if possible. What I'm thinking I have to do is to create and invisibile box absolute it, "center it with top: 0 and left: 0 when the parent has position: relative. Then as I mentioned with it being absolute it would go to the corners of the parents padding too and then in the absolute box, I would create a relative one with display: table and put in all the content.
My question now though is, is there another way to do that?
Solution 1: transform: translate()
You could use transform: translate() with variables to achieve what you want, without weird margins (next solution). Here's some MDN about translate().
:root {
--padding: 5px;
}
.box1 {
height: 50px;
width: 50px;
background-color: red;
padding: var(--padding);
}
.box2 {
height: calc(50px + var(--padding)*2);
width: calc(50px + var(--padding)*2);
background-color: #0000ffb0;
transform: translate(calc(0px - var(--padding)), calc(0px - var(--padding)))
}
<div class="box1">
<div class="box2"></div>
</div>
As you can see, the box is brought up and left with translate, and the height is lengthened by adding the needed padding to it. Thisachieves the desired cover effect.
Solution 2: Positive padding, negative margin
You could also use positive paddings and negative margins. Info below code snippet.
:root {
--padding: 5px;
}
.box1 {
height: 50px;
width: 50px;
background-color: red;
padding: var(--padding);
position: relative;
display: block;
}
.box2 {
height: 50px;
width: 50px;
background-color: #0000ffb0;
padding: var(--padding);
margin: calc(0px - var(--padding));
}
<div class="box1">
<div class="box2"></div>
</div>
What's happening here is following the CSS box model, found on MDN and w3schools. We're simply pushing out with margin and sucking in with padding.
Then, as per request in the comments, --padding is a CSS variable that stores the amount of padding that you want.
Hope I helped!
Cheers, Bobbay
You can add a negative margin if you insist on keeping the padding in place.
.box-1-1 {
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box-1-2 {
width: 50px;
height: 50px;
background: #0000ffb0;
position: relative;
}
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 50px;
height: 50px;
background: #0000ffb0;
padding: 5px;
margin: -5px;
}
<div class="box-1-1">
<div class="box-1-2"></div>
</div>
<pre>
</pre>
<div class="box1">
<div class="box2"></div>
</div>
To center box2 within box1 without absolute position, you can use following css:
.box1 {
display: flex;
align-items: center;
justify-content: center;
}
Edit: example 2 illustrate your need. just remove padding from both boxes and settop: 0; and 'left: 0' with position: relative on box 2. I hope this is the required solution
to center box 2 you need to make its dimension less than box 1. consider the extra pixels added with padding. so the inner box width and height should be 10px less than the outer box.
Example:
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 40px;
height: 40px;
background: #0000ffb0;
padding: 5px;
}
.box1-1 {
border: 2px solid yellow;
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box2-2 {
position:relative;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background: #0000ffb0;
}
<div class="box1">
<div class="box2"></div>
</div>
<br>
<div class="box1-1">
<div class="box2-2"></div>
</div>
I've got a header on my webpage that changes height based on the viewport (eg. 15vh) and has a min-height of 50px.
I'd like to make a colored square within this header that is always exactly 50% of the height of the header regardless of the user's viewport. There will be no content in the colored box. It is for style purposes only. I know that I can't use height: 15%; as there is no content in the container and, as a result, nothing will be displayed. I can't define the box in terms of viewport units because the header isn't always 15% of the height of the viewport (due to the min-height assignment).
Is there any way to accomplish this with CSS?
Here's my setup:
html,
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.header {
position: relative;
background-color: grey;
border-bottom: 1px solid #CCC;
min-height: 50px;
}
.responsivecontainer {
float: left;
max-width: 20vw;
min-height: 50px;
display: flex;
}
.logo {
margin: auto 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.box {
float: left;
height: 50%;
background-color: black;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
/* #end */
<div class="header clearfix">
<div class="responsivecontainer">
<div class="logo">
<img src="http://www.bluebean.ca/logo1.jpg">
</div>
</div>
<div class="box">
<img src="http://www.bluebean.ca/grey.jpg">
</div>
</div>
You can do this with absolute positioning. Like this :
html,
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.header {
position: relative;
background-color: grey;
border-bottom: 1px solid #CCC;
min-height: 50px;
position: relative;
}
.responsivecontainer {
float: left;
max-width: 20vw;
min-height: 50px;
display: flex;
}
.logo {
margin: auto 0;
z-index:10;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.box {
position:absolute;
top:0;
left:0;
height: 50%;
background-color: black;
width: 100%;
}
<div class="header clearfix">
<div class="box"></div>
<div class="responsivecontainer">
<div class="logo">
<img src="http://www.bluebean.ca/logo1.jpg">
</div>
</div>
</div>
You will also need to set z-index value greater than that of box to keep box below elements in header.
I am writing a card list in using html/css/javascript.
Here are the two sample implementation:
http://jsfiddle.net/235Tp/
#wrapper {
background: #EEE;
width: 100%;
height: 100%;
}
#cards-div {
background: green;
width: 100%;
height: 70%;
overflow-y:auto;
}
#cards-list {
width: 100%;
height: 100%;
}
#cards-list li {
vertical-align: middle;
text-align: center;
height: 100%;
width: 20%;
float: left;
background: #EEE;
margin-left: -14%;
border: 1px solid #000;
}
#cards-list li:first-child {
margin-left: 0;
}
http://jsfiddle.net/scctk/
You can see that one has borders while another has not.
The one with borders has a y-asix scrolling bar that I do not want to include.
How to remove that?
Just simply change overflow-y:auto to overflow-y:hidden; as shown:
#cards-div {
background: green;
width: 100%;
height: 70%;
overflow-y:hidden;
}
Here is the DEMO
Use box-sizing: border-box (and -moz-box-sizing) to have the border included in the width/height calculation of the box model.
http://jsfiddle.net/235Tp/3/
I am trying to make a 3 column layout webpage with percentage wrapper width, fixed (pixels) left and right side width and a varying middle column width but i cannot get it to work for the middle column. Here is the source:
html
<aside class="left">
<span>Categories</span>
</aside>
<section>
<span>Main</span>
</section>
<aside class="right">
<span>Test</span>
</aside>
css
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
width: 100%;
}
.container > aside.left {
float: left;
width: 197px;
border-right: black dashed 3px;
}
.container > section {
float: left;
width: auto;
}
.container > aside.right {
float: left;
background-color: #005f98;
width: 200px;
}
Have you looked at the flexible box model? http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
If you don't have to support IE7, this will work:
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
width: 100%;
}
.container {
display: table;
height: 100%;
width: 100%;
min-width: 600px;
}
.container > aside, .container > section {
display: table-cell;
width: auto;
}
.container > aside.left {
width: 197px;
border-right: black dashed 3px;
}
.container > aside.right {
background-color: #005f98;
width: 200px;
}
You could replace your floats with absolutely positioned sidebars:
<aside class="left">
<span>C</span>
</aside>
<section>
<span>M</span>
</section>
<aside class="right">
<span>T</span>
</aside>
And
.left {
position: absolute;
top: 0;
left: 0;
width: 50px;
display: block;
background: #ffe;
height: 100%;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 50px;
display: block;
background: #fef;
height: 100%;
}
section {
display: block;
margin: 0 50px; /* Margin sized to match the sidebars */
background: #fee;
}
Live: http://jsfiddle.net/ambiguous/puPbu/
The colors and sizes are just to clarify where everything is. If you're going to put a wrapper <div> around the whole thing then you'll want to have position: relative on it to get the absolutely positioned sidebars in the right place.
in CSS3 you can use
#multicolumn{
column-count: 3
}
check it on http://jsfiddle.net/ilumin/w7F7c/
reference: http://www.quirksmode.org/css/multicolumn.html
Try setting the widths according to percentages, so for example:
.container > aside.left {
float: left;
width: 31%;
border-right: black dashed 3px;
}
.container > section {
float: left;
width: 31%;
}
.container > aside.right {
float: left;
background-color: #005f98;
width: 31%;
}
Thats how i've overcome this problem before.
If you specify width and float for the left and right column, the middle column will automatically fill up the gap:
http://jsfiddle.net/xHnDX/4/
As you can see, the content div actually overlaps the side divs, although the content will stay between them. If you like, you can add an extra container to compensate for the width of the content div as shown here:
http://jsfiddle.net/YauQc/