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();
});
I'm trying to create simple element with scroll snapping. I've created a demo in Codepen.
I would like to scroll to an other image and after scroll, when other image is visible, change page number and the color of bottom circles.
I've tried to put onscroll"function()" in div .container and calculate somehow winW & scrollX ratios, but this approach is buggy and messy.
How should I make it, please? Thanks a lot. 🙏
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
display: flex;
overflow: auto;
flex: none;
width: 100vw;
height: 100vw;
flex-flow: row nowrap;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none;
}
.pagination {
position: absolute;
top: 16px;
right: 16px;
background: #777;
color: #fff;
line-height: 40px;
width: 50px;
font-size: 12px;
border-radius: 20px;
text-align: center;
}
.image {
width: 100vw;
height: 100vw;
scroll-snap-align: center;
flex: none;
}
#image-1 {
background: url("https://i.ibb.co/fMp05Jf/tamanna-rumee-ov-U2t-Rgfj-H8-unsplash.jpg");
background-size: cover;
beckground-position: center;
}
#image-2 {
background: url("https://i.ibb.co/Fx3Vm0S/pranav-madhu-KHD8vyputcg-unsplash.jpg");
background-size: cover;
beckground-position: center;
}
#image-3 {
background: url("https://i.ibb.co/4Fznzvs/tijana-drndarski-cj-Es-Ho-Pk-ZOQ-unsplash.jpg");
background-size: cover;
beckground-position: center;
}
#image-4 {
background: url("https://i.ibb.co/bPWXGfR/kristaps-ungurs-trs-Gn-MDb-T2-E-unsplash.jpg");
background-size: cover;
beckground-position: center;
}
#image-5 {
background: url("https://i.ibb.co/5jyBdGK/joanna-kosinska-pj-Pe-CRkl83-M-unsplash.jpg");
background-size: cover;
beckground-position: center;
}
.pills {
padding: 8px;
display: flex;
justify-content: center;
}
.circle {
margin: 8px;
height: 10px;
width: 10px;
border-radius: 5px;
background: #ccc;
}
#circle-1 {
background: #777;
}
<div class="container x mandatory-scroll-snapping"">
<div class="pagination">1 / 5</div>
<div class="image" id="image-1"></div>
<div class="image" id="image-2"></div>
<div class="image" id="image-3"></div>
<div class="image" id="image-4"></div>
<div class="image" id="image-5"></div>
</div>
<div class="pills">
<div class="circle" id="circle-1"></div>
<div class="circle" id="circle-2"></div>
<div class="circle" id="circle-3"></div>
<div class="circle" id="circle-4"></div>
<div class="circle" id="circle-5"></div>
</div>
You could simply add anchor tags with the ID name of the slide to automatically scroll to them:
pills (with anchor tag)
<div class="pills">
<a href="#image-3">
<div class="circle" id="circle-1"></div>
</a>
</div>
I'm wondering if it's possible to have the 4 colored divs around the black svg, to fill in the extra width or height of the blank space (the pink) when the screen is resized. There's a pink div behind the logo, to give you and example of the space that needs to be filled by the 4 colored divs. Is something like this possible in pure CSS and HTML or is JS needed? Any info on this helps, thanks.
<style>
ul {
margin:0;
display: flex;
align-items: stretch;
justify-content: space-between;
width: 77%;
}
li {
display: block;
font-size:17px;
text-decoration:none;
}
.navtext{
background-color:orange;
width: 35%;
height:20%;
right:0px;
position:absolute;
display: flex;
align-items: center;
}
body {
margin: 0;
}
.header{
background-color:yellow;
width:100%;
height:20%;
}
.logo{
position:absolute;
left:5%;
background-color:lightblue;
height:20%;
display: flex;
align-items: center;
}
.logotext{
font-size:27px;
font-weight:bold;
}
.front {
background-color:blue;
height: 81vh;
position: relative;
z-index: 2;
width:100%;
}
.video {
background: url(https://picsum.photos/id/107/800/800) center/cover;
height: 100vh;
margin-top: -100vh;
position: sticky;
width:100%;
top: 0;
}
.container {
height:200vh;
}
.right{
right:0px;
width:50%;
Height:91%;
position:absolute;
background-color:pink;
/*display: flex;*/
justify-content: center;
align-items: center;
}
.logoanimecont{
text-align:center;
width:75%;
margin:auto;
}
.left{
width:50%;
Height:91%;
background-color:green;
display: flex;
justify-content: center;
align-items: center;
}
.titlebox {
text-align:center;
width:75%;
background-color:purple;
margin:auto;
}
.title {
font-size:30px;
text-align:center;
}
.hide{ display:none }
.rightbordertop{
width:100%;
height:25%;
background-color:red;
}
.rightborderbottom{
width:100%;
height:25%;
bottom:0px;
position:absolute;
background-color:darkgrey;
}
.rightborderleft{
width:25%;
height:75%;
background-color:brown;
}
.rightborderright{
right:0px;
height:75%;
width:25%;
background-color:blue;
position:absolute;
}
svg { position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 50%;
height: 50%;}
</style>
<div class="container">
<div class="front">
<div class="header">
<div class="logo">
<span class="logotext">f-e</span>
</div>
<div class="nav">
<div class="navtext">
<ul>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="left">
<div class="titlebox">
<span class="title">Random text, centered v and h.</span>
</div>
<div class="right">
<div class="rightbordertop"></div>
<div class="rightborderright"></div>
<div class="rightborderleft"></div>
<div class="rightborderbottom"></div>
<div class="logoanimacont">
<div class="logoanime">
<svg viewBox="0 0 70 70">
<path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
c1.25,0.12,2.44,0.59,3.59,1.41C45.53,11.73,45.56,11.94,45.38,12.19z"/>
<path id="technique" class="hide" d="M0,0v72h72V0H0z M40.05,36.57c0,0.22-0.11,0.33-0.33,0.33h-8.62c-0.22,0-0.33-0.11-0.33-0.33V35
c0-0.2,0.11-0.3,0.33-0.3h8.62c0.22,0,0.33,0.1,0.33,0.3V36.57z"/>
<path id="digital" class="hide" d="M0,0v72h72V0H0z M45.89,36.15c0,0.19-0.09,0.29-0.28,0.3l-16.83,1.48c0.47,1.7,1.41,3.1,2.81,4.2
c1.44,1.11,3.06,1.66,4.88,1.66c1.38,0,2.66-0.34,3.87-1.01c1.19-0.66,2.15-1.56,2.88-2.72c0.11-0.19,0.26-0.23,0.45-0.12
l1.36,0.77c0.19,0.12,0.23,0.28,0.12,0.47c-0.94,1.48-2.18,2.66-3.73,3.52c-1.53,0.86-3.18,1.29-4.95,1.29
c-2.81,0-5.21-0.99-7.2-2.98c-2-2-3-4.41-3-7.22c0-2.86,0.96-5.27,2.88-7.24c1.91-1.97,4.24-2.95,7.01-2.93
c2.69,0.02,4.98,1.01,6.89,2.98c1.89,1.95,2.84,4.3,2.84,7.03V36.15z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="video"></div>
</div>
<div style="height:150vh"> more content later </div>
There are many ways to do it, but without information what do blue and red containers contain content wise, we can only guess. One suggestion though, don't use position: absolute that much, master flex layout A complete guide to flexbox. This solution requires grouping of central three sections into one (maroon, pink and blue containers are now wrapped in div with inline style):
body {
margin: 0;
}
.right {
right: 0px;
width: 50%;
height: 91%;
position: absolute;
background-color: pink;
justify-content: center;
align-items: center;
}
.hide { display: none }
.rightbordertop {
width: 100%;
height: 25%;
background-color: red;
}
.rightborderbottom{
width: 100%;
height: 25%;
bottom: 0px;
position: absolute;
background-color: darkgrey;
}
.rightborderleft{
height: 100%;
flex-grow: 1;
background-color: brown;
}
.rightborderright{
height: 100%;
flex-grow: 1;
background-color: blue;
}
svg {
height: 100%;
}
<div class="right">
<div class="rightbordertop"></div>
<div style="height: 50%; display: flex;">
<div class="rightborderleft"></div>
<svg viewBox="0 0 70 70">
<path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
c1.25,0.12,2.44,0.59,3.59,1.41C45.53,11.73,45.56,11.94,45.38,12.19z"/>
</svg>
<div class="rightborderright"></div>
</div>
<div class="rightborderbottom"></div>
<div class="logoanimacont"></div>
</div>
For simplicity stake, I focused only on the right side of you page, where the svg is surrounded by the four div. Also be aware that I used new class names to make the code easier to understand.
I used flexbox one level at a time to achieve this effect. You can use the new .container div and place it wherever you wish on your page (just be aware of the possible conflicting class names with your current project).
NOTE: Run the code snippet on full screen so you can test the effect.
* {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background: pink;
display: flex;
flex-direction: column;
}
.top {
background: red;
flex: 1;
}
.middle {
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
background-color: dimgray;
flex: 1;
}
.left {
height: 100%;
background: brown;
flex: 1;
}
.center {
width: 40%;
height: auto;
}
.right {
height: 100%;
background: blue;
flex: 1;
}
svg {
display: flex;
align-items: center;
}
<div class="container">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center">
<svg viewBox="0 0 70 70">
<rect width="100" height="100" /></svg>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
I just want to add this new example to show that the my last answer can and will achieve the desired effect. One just need to add the specifics of the project (which are unknown to us).
* {
margin: 0;
padding: 0;
}
.header {
background: yellow;
width: 100%;
height: 15vh;
}
.nav {
background: orange;
width: 35%;
height: 15%;
position: absolute;
right: 0;
}
.content {
display: flex;
align-items: center;
font-family: sans-serif;
background: purple;
}
.left-column {
position: absolute;
left: 0;
width: 50%;
height: 70%;
background: green;
display: flex;
align-items: center;
justify-content: center;
}
.right-column {
position: absolute;
right: 0;
width: 50%;
height: 70%;
background: pink;
display: flex;
flex-direction: column;
}
.top {
background: red;
flex: 1;
}
.middle {
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
background-color: dimgray;
flex: 1;
}
.left {
height: 100%;
background: brown;
flex: 1;
}
.center {
width: 30%;
/* size of the svg */
height: auto;
}
.right {
height: 100%;
background: blue;
flex: 1;
}
svg {
display: flex;
align-items: center;
}
<body>
<div class="header">
<div class="nav"></div>
</div>
<div class="left-column">
<div class="content">Center and Middle Content</div>
</div>
<div class="right-column">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center">
<svg viewBox="0 0 70 70">
<rect width="100" height="100" />
</svg>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
</body>
Had to re-write using flexbox to obtain what I wanted. Incase anyone comes across a problem similar, im posting my answer because it achieved what I needed after re-writing the code.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#right>* {
flex: 1 1;
}
#logo {
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
left:0;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsidebottom{
background-color:pink;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div id="logo"></div>
<div id="rightsidebottom"></div>
</div>
</div>
I want to align some list elements that are created via Javascript with their corresponding buttons. Every time I add a new element to the list, the text appears in a lower position than the "X/Remove element" buttons. Can you please tell me what I'm doing wrong?
You can check the pen right here:
https://codepen.io/Watashi10/pen/RwwQegr
The ideal thing would be to have the list elements and the X buttons in the same line or at the same height under the "input" element.
Here is a screenshot of the actual list
HTML:
<body>
<div class="container d-flex align-items-center h-100">
<div class="row">
<header class="text-center col-12">
<h1 id="header">My Shopping List</h1>
</header>
<input class="text-center col-6" id="userinput" type="text" placeholder="add items">
<section class="row">
<button id="enter">Enter</button>
</section>
<div class="text-center col-12" id="shopping">
<ul class="list" style="list-style: none">
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
CSS:
body,
html {
width: 100%;
height: 100%;
font-family: 'Fjalla One', sans-serif;
background: url("https://wallpaperplay.com/walls/full/5/6/5/68320.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 15vw;
margin: 0 auto;
min-height: 50vh;
}
.row {
display: flex;
justify-content: center;
flex-direction: row;
}
#header {
display: inline-block;
position: relative;
bottom: 200px;
font-family: 'Fredericka the Great';
font-size: 5rem;
color: white;
}
input {
flex-grow: 5rem;
border: none;
padding: 25px;
}
button {
border: 1px solid;
background: blue;
color: white;
}
input, button {
position: relative;
bottom: 50px;
}
.userinput {
float: left;
}
h2 {
font-family: 'Fredericka the Great';
color:#FFB6C1;
font-size: 12px;
}
ul li {
padding: 3rem;
font-family: 'Fredericka the Great';
font-size: 25px;
color: #ffffff;
}
.done {
text-decoration: line-through;
}
I would appreciate any kind of help. Thank you!
Remove the bottom: 50px from
input, button {
position: relative;
bottom: 50px; //remove this
}
or if you want input to have bottom: 50px; seperate the css styling of them.
input {
position: relative;
bottom: 50px;
}
button {
position: relative;
margin-left: 15px !important; //just to make it a little nicer
}
So you're creating a textnode from the user input box here:
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
I would recommend making this a div or a p or something else that can be styled. Like so:
let inputValue = document.createElement('div');
inputValue.innerHTML = input.value;
li.prepend(inputValue)
input.value = "";
So you're li sctucture should look more like this:
<li>
<div class="value"></div>
<button></button>
</li>
After that, theres many ways to have these be inline. You could style the li to have a display: flex, or you could float the button to the right within the li. But I would start with making the value that you catch and put into the li something besides just the textNode.
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;
}