I have a responsive div, split into two vertically. These are set to display inline, side-by-side horizontally, unless the viewport shrinks below 400px, then they stack vertically.
Everything works fine when the two child divs contain text only - but an image in the left-hand child div will cause the right-hand child div to drop: http://jsfiddle.net/2o9ryj93/.
I'm not sure why. Can anyone help me out? Thanks for your time.
CSS:
.wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 70%;
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 0;
}
#left,
#right {
font-family: serif;
line-height: 150%;
font-size: 2.2vw;
display: inline-flex;
width: 40%;
height: 90%;
background-color: #edeeeb;
padding: 5%;
}
See fiddle
Add CSS:
#left, #right{float:left;}
Related
To my <h3> title, I added some content with its :before. This content looks like a bottom border.
I positioned this border with position: absolute, and top: 40px.
On big screens, it's working fine, but on small screen, there is some problem, I think because the top position. How can I solve this?
.module-head {
text-align: left;
position: relative;
margin: 40px 0
}
.module-head-title {
color: #32384d;
font-weight: 600;
font-size: 30px;
display: inline-block
}
.module-head:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 40px;
background: #32384d;
width: 200px;
max-width: 250px;
height: 5px
}
<div class="module-head">
<h3 class="module-head-title">Újdonságok, akciós termékek</h3>
</div>
I solved it. It didnt need position absolute, only display block.
So i have .cont that's centered in using position absolute and is height 80% of body.
Inside it there are two divs. One is fixed height. And other one needs to expand to rest of parent, .cont.
So How do i make it expand to parent.
One other requirement is that content in both of these needs to be vertically and horizontally centered.
body
.cont
.top
.fillRest
Here is jsfiddle: http://jsfiddle.net/24jocwu5/
make .fillRest Expand to rest of .cont.
vertically and Horizontally center h1 headings in both divs.
Don't Use calc()
can use display table, flow, position, and other tricks.
Here you go. Absolutely position the white container with a top-padding that equals the height of your fixed-height top div. Then give the top div a z-index so it goes over your white box:
Fiddle - http://jsfiddle.net/24jocwu5/2/
* {margin: 0; padding: 0;}
html, body {
height: 100%;
background-color: #3dd;
color: #aaa;
font-family: helvetica;
}
.cont {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
background-color: #1af;
width: 400px;
margin: auto;
height: 80%;
}
.top {
height: 100px;
background-color: pink;
position: relative;
z-index: 1;
}
.fillRest {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 100px;
height: 100%;
background-color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
text-align: center;
width: 200px;
margin: auto;
background-color: #eee;
}
You can use flexbox for this
.cont {
display: flex;
flex-direction: column;
}
.cont > div {
display: flex;
}
.fillRest {
flex: 1;
}
Working Fiddle
This is what you want?
Only position fixed and right and left 0
http://jsfiddle.net/pabliiitoo/24jocwu5/1/
.fillRest {
position: fixed;
left: 0;
right: 0;
background-color: red;
min-height: 80px;
}
In order to expand the .fillRest to the rest of its parent .cont, you need to set it's height to a percentage. I estimate about 20~30% is what you want in order to maintain a similar look to the image you've provided here.
To test it, grab a very large paragraph full of letters and anything you want and put it where the 'Content' text is, that way you will be able to see it expanding in a responsive way. Another suggestion I will give you is to make your width percentages as well, so that they expand according to the width of the screen responsively.
Let me know if this helped you, otherwise I can take another look :)
CSS
.cont {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #1af;
width: 400px;
margin: auto;
height: 80%;
}
Personally, I think the way you're going about this is all wrong. But maybe something like this would work.
http://jsfiddle.net/24jocwu5/5/
CSS selectors I changed:
.cont {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
background-color: #1af;
width: 400px;
margin: 10% auto;
overflow: hidden;
}
.top {
height: 20%;
background-color: rgba(255,255,255,.8);
}
.fillRest {
background-color: white;
position: relative;
width: 100%;
height: 80%;
}
h1 {
text-align: center;
width: 100%;
margin: auto;
background-color: #eee;
}
This is Summary Of Ways.. First two ways posted here--
FlexBox Method 100% WORKS
Padding Method 80% WORKS. Useful But not exactly.
Css Table Cell and Table Rows 100% WORKS. From Me.
Using Calcs Simplest One. 100% WORKS. From me.
Css Table Cell: http://jsfiddle.net/24jocwu5/7/
.cont is The Table. top & fillRest are table rows, and there is cell which can have vertical align middle.
Calc Method: http://jsfiddle.net/24jocwu5/9/
Works but doesn't scale well if content increases, so need to use another div which can contain the content. Like so http://jsfiddle.net/24jocwu5/10/
Default code:
* {margin: 0; padding: 0; }
html, body {
height: 100%;
background-color: #3dd;
color: #aaa;
font-family: helvetica;
}
.cont {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
background-color: #1af;
width: 400px;
margin: auto;
height: 80%;
}
I am building a site that works fine in both Chrome and Safari, but am having difficulties in Firefox. The applicable HTML in this issue is simple, is is just three divs inside of another div. The goal is to have one div positioned at the top of the parent div, one at the bottom, and one stretching across the remaining space:
<div class="outer">
<div class="top">
<p>some junk here</p>
</div>
<div class="middle">
<img src="<?php echo(htmlspecialchars($image_url)); ?>"/>
</div>
<div class="bottom">
<p>more junk</p>
</div>
</div>
Now, the css is as follows:
.outer {
position: relative;
display: inline-block;
text-align: center;
width: 600px;
height: 600px;
}
.middle {
background-size: 100%;
top: 62px;
bottom: 62px;
right: 0;
left: 0;
margin: 0;
padding: 0;
position: absolute;
}
.middle img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 95%;
max-height: 95%;
}
.top, .bottom {
width: 100%; /* THIS IS WHAT IS NOT WORKING */
height: 60px;
margin: 0;
padding: 0;
display: table;
position: absolute;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
The issue is that the top and bottom divs are not extending to 100%. The are taking up as little space as necessary to fit their content. I have tried setting a max width on the divs, tried changing the display types, but nothing works. The kicker is, once I resize the window even the smallest amount, the top and bottom divs shoot to 100%. Strange. I am at a loss with this one so any help is greatly appreciated. Thanks.
.outer DIV cannot be display: inline-block for this scenario. inline-block means to adapt to the child widths. You need to either specify an exact width dimension, or use block display property.
.outer {
position: relative;
display: block; /* use BLOCK here instead of inline-block; */
text-align: center;
}
The reason why the top and bottom divs' widths were not working properly was because they were set to a display type of table. Removing just that line fixed the issue.
.top, .bottom {
width: 100%;
height: 60px;
margin: 0;
padding: 0;
/* REMOVE: display: table; */
position: absolute;
}
I'm trying to set up an anchor that would automatically stretch to match the dimensions of an image that is used as a background. Also, the anchor's text needs to be both horizontally and vertically centered. Here's my current HTML markup:
<div class="wrap">
<img src="http://placehold.it/350x150">
<a href="#">
<span>Anchor</span>
</a>
</div>
The idea is that my .wrap is a fluid column of a grid, so the image stretches to match the width and height is given by the image's ratio. The anchor is displayed as a table for vertical alignmenet and the span has a background visible on hover over the anchor. There is my CSS:
* {
box-sizing: border-box;
}
body {
height: 100%;
}
.wrap {
height: auto;
margin: 2em;
overflow: hidden;
padding: 1em;
position: relative;
width: 80%;
}
.wrap img {
width: 100%;
}
.wrap a {
display: table;
height: 100%;
left: 1em;
padding: 1em;
position: absolute;
text-align: center;
top: 1em;
width: 100%;
}
.wrap a span {
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
.wrap a:hover span {
background: red;
}
The problem I have is the height of the anchor, it refuses to fill the container. Here you have a fiddle: http://jsfiddle.net/xuxG5/3/
I tried looking into other questions around here but unfortunately none of them matched my problem - it's a combination of 100% height table in a fluid parent height but the most common answer was to set height of the parent and the absolute position doesn't make it any simpler.
Question edited to show the anchor's text doesn't always have just one line of text
I was hoping you could help me if there is a CSS solution, otherwise I will use a simple JS script.
This should make the A fill the box - http://jsfiddle.net/xuxG5/5/
.wrap a {
display: block;
left: 2em;
right: 2em;
bottom: 2em;
top: 2em;
position: absolute;
text-align: center;
border: 1px solid red;
}
.wrap a span {
position: absolute;
top: 50%;
margin-top: -1em;
line-height: 2em;
width: 100%;
display: block;
}
I've got the following piece of CSS in which i want the navigation and the website to be absolutely positioned so i can slide them back and forth when the menu button i pressed(Like the facebook app for example). To do so i've got a container with an overflow: hidden(To hide the nav bar and slide it in when needed). However; the container loses it's autoheight because of the absolute positioning within i'm afraid.
How can i get the height to be set automatically again as overflow: hidden does without absolute positioning in it.
i've created a fiddle in which the container has a height of 500px. I want to make the height scale automatically though. http://jsfiddle.net/rB7EY/
div {
box-sizing: border-box;
}
.container {
overflow: hidden;
width: 100%;
max-width: 60em;
padding: 0;
margin: 0 auto;
position: relative;
background: grey;
height: 500px;
}
/*CSS for the navigation bar that can be toggled*/
.navigation {
width: 15em;
float: left;
background: blue;
position: absolute;
left: -20px;
}
/*The CSS for the actual content*/
.website {
width: 100%;
float: left;
position: absolute;
left: 0px;
}
.container .website .top_bar {
height: 4em;
background: pink;
padding: 1em;
position: relative;
}
.container .website .top_bar .menu_button {
width: 3.2em;
height: 2.5em;
background: red;
border: 0px;
}
nav.menu {
width: 15em;
position: absolute;
left: 1em;
top: 3em;
background: yellow;
}
If I understand you well, enough you want to scale the container automaticly? Try using a min-height and a max-height
I fixed it by using a div between the container and the navigation and website and gave that a absolute position. With that i've decided to make the container be min-width: 100%