#wrapper should be a square with the width of the #text. Longer text should result in a larger square. Line breaks aren't necessary. How does this work in CSS? The HTML can be modified if needed.
http://codepen.io/anon/pen/XXOjJB
<div id="wrapper">
<div id="text">Lorem ipsum!</div>
</div>
This is how it should look like:
.wrapper-outer {
display: inline-block; /* make as wide as text */
vertical-align: top;
background-color: green;
}
.wrapper-outer:nth-child(2) {
background-color: tomato;
}
.wrapper-outer:nth-child(3) {
background-color: goldenrod;
}
.wrapper-inner {
height: 0; /* collapse the element */
padding: 50% 20px; /* top and bottom padding equal to half the width of parent; this gives us a height equal to the width of the parent */
}
.text {
transform: translateY(-50%); /* move text up to center; */
}
<div class="wrapper-outer">
<div class="wrapper-inner">
<div class="text">Lorem ipsum!</div>
</div>
</div>
<div class="wrapper-outer">
<div class="wrapper-inner">
<div class="text">A</div>
</div>
</div>
<div class="wrapper-outer">
<div class="wrapper-inner">
<div class="text">Lorem ipsum! Lorem ipsum! Lorem ipsum! Lorem ipsum!</div>
</div>
</div>
set padding in the child of wrapper
#text {
background-color: red;
display: inline-block;
padding-bottom: 50%;
padding-top: 35%;
}
check: https://jsfiddle.net/dLs9sj5y/
Related
I want to place OR text on top of the vertical rule(border-right) as shown in the image. No idea how to place it.
.left_col {
border-right: 1px solid black;
}
<div class="container mt-5">
<div class="row">
<div class="col-md-6 left_col">
/* left column content */
</div>
<div class="col-md-6">
/* right column content */
</div>
</div>
</div>
You can absolutely position a pseudo element:
.left_col {
position: relative;
border-right: 1px solid black;
}
.left_col:after {
content: 'or';
display: inline-block;
padding: 0.25em 0.5em;
position: absolute;
top: 50%;
left: 100%;
transform: translate(-50%, -50%);
background: orange;
}
/*following just for this demo not needed*/
.row {
display: flex;
}
.col-md-6 {
height: 100px;
width: 50%;
}
<div class="container mt-5">
<div class="row">
<div class="col-md-6 left_col">
/* left column content */
</div>
<div class="col-md-6">
/* right column content */
</div>
</div>
</div>
why don't you do this?
<div class="container mt-5">
<div class="row">
<div class="col-md-6 left_col">
<span>OR<span>
/* left column content */
</div>
<div class="col-md-6">
/* right column content */
</div>
</div>
</div>
in your css
.left_col {
position: relative;
}
span{
position: absolute;
top: 40%;
right: -10px;
}
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I have this kind of structure....
<div class="container-fluid">
<div class="section_3 row">
<div class="image_info_carousel_left col-xs-12 col-sm-12 col-md-6 col-lg-6">
<h1>Stay organized with your personal moving dashboard</h1>
<div class="author">Get timely reminders and assign tasks to stay on top of your move</div>
</div>
<div class="info_image col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="css/img/realtor-fourth.png" />
</div>
</div>
</div>
with this type of css....
.image_info_carousel_left {
padding: 100px 50px !important;
color: #fff;
background-color: #3B4C60;
}
.info_image {
padding: 0;
}
The height of the image within the image_info class varies dynamically... so the height of the image_info_carousel_left should also change & and the <h1> and <div class="author"> should be vertically centered...
I have tried using display:table & display:table-cell, but it doesn't work as classes with col-lg- are having float:left...
how can I do this?
this is the formula for vertical align anything.
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
Just put those commands to div you want to vertically align, or create a mixin if you are using preprocessors
I created this example to see it working with floats:
http://codepen.io/riogrande/pen/NxGROP
You can use display:inline-block; and vertical-align:middle; and don't forget to remove extra spaces which occurred by display:inline-block;.
Jsfiddle
* {
box-sizing: border-box;
}
.container {
width: 100%;
background: red;
padding: 10px;
}
.box {
display: inline-block;
vertical-align: middle;
width: 50%;
}
.box1 {
background: blue;
}
.box2 {
background: blue;
}
img {
width: 100%;
display: block;
}
<div class="container">
<div class="box1 box">
<img src="http://placehold.it/350x150">
</div><!--
--><div class="box2 box">heading with the fixed height</div>
</div>
The image shows what I'm trying to accomplish. All 3 divs are contained in a wrapper that's 800px. But the second div's background extends the full width of the body.
I have a solution nearly identitical to the one by patkay.
My HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="content">Content 1...</div>
</div>
<div class="inner-wrapper noted">
<div class="content">Content 2...</div>
</div>
<div class="inner-wrapper">
<div class="content">Content 3...</div>
</div>
</div>
And my CSS:
.outer-wrapper {
width: 100%;
outline: 1px dotted blue;
}
.inner-wrapper {
width: inherit;
}
.inner-wrapper.noted {
background-color: gray;
}
.content {
width: 600px;
margin: 10px auto;
outline: 1px dotted red;
}
Fiddle reference: http://jsfiddle.net/audetwebdesign/Nbu7G/
Essentially, I use the .outer-wrapper to set control the overall width, and then inherit the width to the .inner-wrapper which is used to set the background color through an extra class call .noted.
The inner-most container .content has the fixed width (for example, 600px).
The extra markup could be clean-up semantically using HTML5 tags, but this pattern gives you a lot of hooks to use background images and so on.
One way you can do this is to have three separate div's that are all aligned centrally on the inside, have full width backgrounds and are stacked on top of each other.
<div class="top">
<div class="wrap">
<p>Some content</p>
</div>
</div>
<div class="mid">
<div class="wrap">
<p>Some content</p>
</div>
</div>
<div class="bottom">
<div class="wrap">
<p>Some content</p>
</div>
</div>
The CSS is:
body {
text-align: center;
}
.top, .bottom {
background: #aaa;
width: 100%;
}
.mid {
background: #616161;
width: 100%;
}
.wrap {
width: 800px;
margin: 0 auto;
padding: 5px;
}
I'm having an issue with stretching div A based on the height of div B, OR stretching div B based on the heigt of div A (depends which has the most content).
I tried looking into faux columns, but as my divs aren't in the same 'holder' this can't work... My current code looks like this:
<div id="header">
<div id="content">CONTENT HEADER</div>
</div>
<div id="content">
<div id="column-left">
<p>INHOUD LINKER KOLOM</p>
<p> </p>
</div>
<div id="column-right">
<p>INHOUD RECHTER KOLOM</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="clear"></div>
</div>
<div id="main">
<div id="content">
<div id="main-content">
<p>HOOFD INHOUD </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<div id="content">CONTENT FOOTER</div>
</div>
With as CSS the following:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.clear {
clear: both;
}
#content {
position: relative;
width: 950px;
margin-left: auto;
margin-right: auto;
z-index: 10
}
#header {
position: relative;
min-width: 990px;
width: 100%;
height: 90px;
background-color: #F00;
}
#column-left {
width: 500px;
float: left;
background-color: #0F0;
}
#column-right {
width: 450px;
float: right;
background-color: #00F;
position: absolute;
margin-left: 500px;
}
#main {
min-width: 990px;
width: 100%;
background-color: #FF0;
}
#main-content {
width: 500px;
float: left;
}
#footer {
min-width: 990px;
width: 100%;
height: 90px;
background-color: #F00;
}
In my example you will see that I made the 'blue' div's content longer whereas I would like to have the 'yellow' div to stretch (so the footer will be below them both)
The other way around would also be applicable (if the 'yellow' div would contain more content, the 'blue' div should stretch... Although this can be solved with faux columns if I give a 'yellow-blue' image as background to the 'blue' div).
An example as image: http://tinypic.com/view.php?pic=jjpx0k&s=6
Can someone help me with this?
Any help would be much appreciated!
I looked at your code and you really can't achieve what you want to do because the blue div is in absolute.
The only way of doing this is by using jquery and detecting the height of the blue div and then adding margin or height to the yellow div to make the space so that the footer appears to be under the blue div...
I hope this helps.