I am trying to style a webpage using Bootstrap. Here is my code:
<div class="row">
<div class="table-row">
<div class="mycolumn" id="sidebar">
<div class="list-group">
<div class="list-group-item"><input type="text" class="form-control" /></div>
<div id="mainmenucontentdiv" class="list-group-item">
<div>
<a class="list-group-item" href="#">Temporibus sit</a>
<a class="list-group-item" href="#">Deserunt consequuntur</a>
<a class="list-group-item" href="#">magni nesciunt</a>
<a class="list-group-item" href="#">lorem bla </a>
</div>
</div>
</div>
</div>
<div id="contentarea" class="mycolumn">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero molestiae ipsam fuga excepturi, ullam illum iste non culpa et beatae, aut, cupiditate vitae voluptatibus explicabo magni tempora impedit saepe inventore.</div>
</div>
</div>
</div>
CSS:
#sidebar{
background-color: red;
padding: 20px 0px 0px;
width: 250px;
}
.mycolumn{
display: table-cell;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
#mainmenucontentdiv {
overflow: hidden;
padding: 0;
}
.table-row{
display: table-row;
}
To better view the example, you may see it here: http://jsfiddle.net/pkctb8uc/
Why is that the content in #contentarea is pushed down? As you can see there is a big blank area at the top. How can I fix it?
because you use display: table-cell, to fix this just add "vertical-align: top" in .mycolumn
Edit css as follows ,
.mycolumn{
float: left;
position: relative;
display: table-cell;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 3px;
padding-top: 16px;
width: 37%;
}
Related
I'm trying to recreate this but I'm stuck on getting the image and text to fit inside the innermost border. the final is supposed to have an outside border, an inside border, and a div that expands across the top. Then a picture that is 30% width of the top spanning div. Then text that is supposed to be width 70% of the top spanning div.
This is what I got so far HTML:
:root {
--winter-primary: #ffd110;
}
.outside-winter-border {
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
}
.insdie-winter-border {
border: 2px solid var(--winter-primary);
margin: 20px;
}
.wh {
background-color: var(--winter-primary);
padding: 30px;
}
.winter-image {
width: 30%;
float: left;
}
.wi {
width: 70%;
float: right;
}
<section class="winter">
<div class="outside-winter-border">
<div class="insdie-winter-border">
<div class="section-heading">
<div class="wh">
<h2>Winter</h2>
</div>
</div>
<div class="content-wrapper">
<div class="winter-image">
<div class="section-image">
<a href="winter.html">
<img src="assets/images/winter.jpg" alt="Winter Image">
</a>
</div>
</div>
<div class="wi">
<div class="section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
The exact desired result is unclear. However, here is a version using flex that gets both the image and text within the border. Don't use float.
.outside-winter-border {
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
}
.insdie-winter-border {
border: 2px solid var(--winter-primary);
}
img {
height: 100%;
}
.wh {
display: inline-flex;
}
.insdie-winter-border {
display: flex;
align-items: center;
}
:root {
--winter-primary: #ffd110;
}
p {
margin-left: 1em;
}
.section-heading {
width: 100%;
background-color: var(--winter-primary);
text-align: center;
}
.section-heading>h2 {
margin: 0;
}
<section class="winter">
<div class="outside-winter-border">
<div class="section-heading">
<h2>Winter</h2>
</div>
<div class="insdie-winter-border">
<div class="wh">
<a href="winter.html">
<img src="https://dummyimage.com/125/000/fff" alt="Winter Image">
</a>
</div>
<div class="content-wrapper">
<div class="winter-image">
</div>
<div class="wi">
<div class="section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
I think you can try this (insted of .winter-image and .wi ):
.content-wrapper {
display: flex;
}
.winter-image {
flex: 3;
}
.wi {
flex: 7;
}
I have the majority of my code wrapped in a container with the following style:
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
This is to enable me to scroll smoothly from one section of the page that takes up a height of 100vh to another. (That is why I have overflow: auto in my styling). However, when I add the "overflow: auto", the web page stops being the full width of my window (as shown in the image).
screenshot of problem
When I remove the "overflow: auto" and replace it with "overflow: none", then the width is fixed but my scrolling feature now longer works.
HTML Code here:
<body class="container-fluid">
<!-- Main Page -->
<div class="container">
<div class="section">
<div class="main row vertical-center">
<div class="main-image col-md-6">
<img src="rec/img/placeholder-image.png" alt="client_image">
</div>
<div class="main-text align-items-center col-md-6">
<h2 class="p-3">
Name Lastname
</h2>
<span class="align-bottom bottom-text-main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis nostrum illo? Vero necessitatibus accusamus ullam commodi, consequatur corrupti. Recusandae eligendi eaque possimus minima numquam dignissimos cumque adipisci tempora temporibus.
</span>
</div>
<span id="contact">
<!-- <ul class="contact-icons" style="list-style-type:none;">
<li></li></li>
<li></li>
<li></li>
</ul> -->
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
<!-- Information -->
<div class="section info">
<div class="information p-4 pb-0" id="information">
<h1 >More about me.</h1>
<br>
<div class="background ml-3">
<h5 class = "pb-1">Background</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facilis, est distinctio esse temporibus sint animi sunt veniam asperiores commodi quo numquam excepturi nemo ab, harum, nam possimus quas veritatis!</p>
</div>
<div class="skills ml-3">
<h5 class="pb-1">Skills</h5>
<ul>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
</ul>
</div>
</div>
</div>
<!-- Experience -->
<div class="section">
<div class="experience p-3" id="experience">
<h1 class="pt-3">Work experience</h1>
<br>
<div class="xp">
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, aliquid. Quidem, quae dolorem! Amet ea obcaecati nam quia aliquid, facilis dolorem ab velit optio. Accusamus quidem commodi rerum itaque incidunt?
</div>
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aperiam veritatis eos illo quo necessitatibus omnis illum iure impedit debitis, consectetur voluptatum quisquam, quae temporibus veniam. In minima quos perferendis.
</div>
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officiis alias architecto non iure, quia labore rem. Totam nulla qui exercitationem beatae, ab aperiam! Asperiores soluta nisi repudiandae odit doloribus.
</div>
</div>
</div>
</div>
<!-- Additional Inforation -->
<div class="section">
<div class="additional-info p-3" id="additional-info">
<h1>Additional Information</h1>
<!-- <h1 class="second-line-info">Information</h1> -->
<div class="additional-info-text text-left">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, pariatur!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, pariatur at. Fuga error impedit officiis!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor facilis tempora odit vel cum adipisci, aut ducimus illum ab tenetur quae temporibus non. Velit rerum ipsa quis, sint blanditiis doloremque repellendus aliquid eius amet exercitationem!</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem, ipsum dolor.</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="section" id="footer">
<footer class="page-footer font-small blue pt-4">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Name Lastname</h5>
<p>Cliche Inspiritional Quote Here</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-6 mb-md-0 mb-9">
<!-- Links -->
<h5 class="text-uppercase">Contact Links</h5>
<ul class="list-unstyled">
<li>
<i> Facebook</i>
</li>
<li>
<i> Instagram</i>
</li>
<li>
<i> Email</i>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
</footer>
</div>
</div>
Here is the CSS file:
body {
color: var(--grey);
width: 100%;
padding: 0;
margin: 0;
min-width: fit-content;
}
.container {
position: relative;
width: 100vh;
height: 100vh;
overflow: visible;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.container .section {
position: relative;
height: 100%;
width: 100%;
scroll-snap-align: start;
/* background-blend-mode: multiply; */
}
/* .container.section:nth-child(1) {
background: ;
background-size: cover;
background-attachment: fixed;
} */
.main {
background-color: var(--white);
padding-left: 0%;
padding-right: 0%;
margin-top: 0rem;
margin-bottom: 0rem;
height: 100vh;
}
.main-image {
padding-top: 0%;
margin-left: 0%;
padding-right: 0;
margin-bottom: 2rem;
height: 50%;
}
.main-image img {
height: 100%;
width: 100%;
margin-left: 0%;
margin-right: 0%;
}
.main-text {
padding-bottom: 2rem;
height: 50%;
/* margin-left: 5%;
margin-right: 5%; */
}
.main-text p {
vertical-align: middle;
}
.information {
background-color: var(--soft);
height: 100vh;
padding-top: 0;
}
.experience {
background-color: var(--white);
height: 100%;
}
.information h1 {
padding-top: 1rem;
}
.background {
padding-top: 3rem;
}
.skills ul {
list-style-type: none;
}
.skills {
padding-top: 3rem;
}
.additional-info {
background-color: var(--soft);
height: 100vh;
padding-top: 1rem;
}
.additional-info h1 {
color: var(--grey);
}
.second-line-info {
margin-left: 5rem;
}
.additional-info-text {
text-align: center;
padding-left: 2rem;
padding-right: 2rem;
}
.additional-info-text p {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
#footer {
height: 10vh;
}
.list-unstyled i {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#media only screen and (min-width: 600px) {
html {
width: 100%;
}
body {
width: 100%;
padding: 0;
}
.main {
padding-top: 0%;
width: 100%;
}
.vertical-center {
display: flex;
align-items: center;
}
.main-image {
height: 100%;
margin-top: 15%;
}
.main-image img {
border-radius: 50%;
height: 50%;
width: 75%;
}
.main-text {
height: 100%;
margin-top: 20%;
}
.main-text h2 {
margin-bottom: 3rem;
}
#contact {
position: absolute;
bottom: 2%;
right: 2%;
}
.contact-icons {
padding: 0;
font-size: 2em;
display: table-cell;
}
.fa {
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.contact a {
display: inline-block;
width: 1.2em;
transition: all .2s ease-in-out;
}
a:hover {
text-decoration: none;
}
.additional-info {
text-align: left;
justify-content: left;
}
.additional-info-text p {
margin-top: 2rem;
}
/* BEVAN ONDER */
/* General */
body, html
{
width: 100%;
padding: 0;
margin:0;
}
.container{
width: 100%;
}
.container.section{
width: 100%;
}
/* Information page(s) */
.background{
padding-top: 2rem;
}
.skills{
padding-top: 2rem;
}
.background p{
width: 50%;
}
}
Is there a possible fix for this?
Use this css value
overflow:scroll
or
overflow:visible
Keeping them auto will let browser decide the overflow.
I personally never use auto value.
try this
overflow:scroll;
width:100vw
if didn't work please edit post and add html
I 've got the following code, and when I am viewing on mobile the Slick Carousel is bigger than the parent element and I couldn't fix it with any settings. I am using Boostrap as well.
<nav class="navbar fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/assets/Intech Logo.png" alt="INTECH DYNAMICS logo" />
</a>
</div>
</nav>
<div class="wrapper-section-1">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-xl-6 col-xs-12 col-xm-12 d-flex justify-content-center imagine">
<img class="img img-fluid floating" src="/assets/Header Image.png" alt="Careers banner image" />
</div>
<div class="col-lg-6 col-md-6 col-xl-6 col-xs-12 col-xm-12 d-flex justify-content-center">
<div class="row">
<div class="col-lg-12 title">
<h1 class="text-title">CAREERS</h1>
</div>
<div class="col-lg-12 slide">
<div class="single-item slider slide">
<div>
<div class="font-italic">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Illo at reiciendis architecto harum nihil culpa accusantium
saepe ut, tempore quibusdam ex odit magnam nemo accusamus
numquam consequatur? Praesentium, voluptates pariatur!</div>
<br>
<span class="font-weight-bold">Darius Opro</span><span class="font-weight-normal"> Full Stack
Programmer</span>
</div>
<div>
<div class="font-italic">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Illo at reiciendis architecto harum nihil culpa accusantium
saepe ut, tempore quibusdam ex odit magnam nemo accusamus
numquam consequatur? Praesentium, voluptates pariatur!</div>
<br>
<span class="font-weight-bold">Cosmin Mihalache</span><span class="font-weight-normal"> Front End
Developer</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The CSS looks like this:
.wrapper-section-1 {
font-family: IBMPlexSans-Medum;
color: white;
margin-top: 54px;
width: auto;
padding: 8vh;
background-image: linear-gradient(to right, #1c003b, #5216aa);
}
.img {
max-width: 70%;
height: auto;
}
.imagine {
padding: 30px 0 30px 0;
}
.title {
align-items: flex-end;
display: flex;
justify-content: flex-end;
}
.text-title {
margin-bottom: 2rem;
}
/* Slick Carousel */
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out 0.3s;
opacity: 0.2;
}
.slick-active {
opacity: 0.5;
}
.slick-current {
opacity: 1;
}
.slide {
width: 500px;
margin: 0;
text-align: right;
background-color: blue
}
/* Custom Arrows */
.prev-arrow {
position: absolute;
bottom: -50px;
left: 400px;
cursor: pointer;
}
.next-arrow {
right: 3px;
position: absolute;
bottom: -50px;
cursor: pointer;
}
/* Floating Animation */
.floating {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
$(document).on("ready", function () {
$(".single-item").slick({
lazyLoad: "ondemand", // ondemand progressive anticipated
infinite: true,
settings: "unslick",
prevArrow:
'<span class="prev-arrow"><i class="fas fa-angle-left"></i></span>',
nextArrow:
'<span class="next-arrow"><i class="fas fa-angle-right"></i></span>',
});
});
I attached a photo to have a better idea of what is happening. I tried to give to the carousel padding, to set width in percentage with parent element but nothing worked.
Update: Pretty sure that JS has nothing to do with it but I attached anyway
I've created a slideshow inside a section tag using a div tag. I tried to add a body of text above the slideshow so I added another div tag above the div tag for the slideshow and it worked however, as I add text, it pushes the images in the slideshow down, cutting off the images in the slideshow. Is there a solution to this? Thank you
<!DOCTYPE html>
<html>
<head>
<title> AnimeExpoBd </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<ul>
<li class="logo">ANIME EXPO LOGO</li>
<li class="navbar">HOME</li>
<li class="navbar"><a href=#gotoaboutus>ABOUT US</a></li>
<li class="navbar">SCHEDULE</li>
<li class="navbar">CONTACT US</li>
</ul>
</header>
<section class="feature-box opening">
<div id="gotoaboutus" class="about-us"><strong>ABOUT US</strong><p class="descpara">We aim to popularize and educate the Bangladesh public about Japanese anime and manga culture, as well as provide a forum to facilitate communication between professionals and fans. We're passionate about all things anime. We're here to help you discover hidden gems, learn more about new and current anime, find fan art and cosplay of all your faves, and get your opinions!</div>
<div class="Images"></div>
</section>
<section class="feature-box closing">
<div class="sched">Section A<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque exercitationem ad sed enim maiores cum recusandae numquam quibusdam. Perferendis reiciendis ut tenetur dignissimos neque hic impedit optio quasi libero sunt. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi, ipsum? Exercitationem accusantium quaerat numquam architecto cum culpa magnam illo quos quod. Eligendi placeat repellendus perferendis veritatis ducimus iure maxime vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae rerum quia odit veniam natus consequuntur iste eum eos officiis ab optio sed itaque quasi possimus voluptatibus, velit est dolor quo. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat nostrum in, quidem totam a atque obcaecati natus ratione quae rem ipsam sed hic laudantium enim aspernatur nemo cum, nobis eius.</p></div>
<div class="slidershow middle">
<div class="header">Header and Description</div>
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<div class="slide s1">
<img src="images/1.jpg" alt="">
</div>
<div class="slide">
<img src="images/2.jpg" alt="">
</div>
<div class="slide">
<img src="images/3.png" alt="">
</div>
<div class="slide">
<img src="images/4.jpg" alt="">
</div>
<div class="slide">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
</div>
</div>
</section>
<footer>footer</footer>
</body>
</html>
section.feature-box.closing {
margin: 5px;
padding: 10px;
height: 620px;
width: 1310px;
background-color: #34495e;
display: flex;
}
section.feature-box.closing div.slidershow div.header {
font-size: medium;
color: white;
padding-bottom: 20px;
text-align: center;
margin-top: 5px;
}
section.feature-box.closing div.sched {
width: 481px;
text-align: center;
color:black;
font-size: medium;
background-color: #c3edea;
}
section.feature-box.closing div.slidershow {
width: 700px;
height: 400px;
overflow: hidden;
}
section.feature-box.closing div.middle {
position: relative;
top: 68%;
left: 31%;
transform: translate(-50%, -50%);
}
section.feature-box.closing div.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
section.feature-box.closing div.navigation label.bar {
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
}
section.feature-box.closing div.navigation label.bar:hover {
background-color: white;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
section.feature-box.closing div.slides {
width: 500%;
height: 100%;
display: flex;
background-size: 100%;
}
section.feature-box.closing div.slides div.slide {
width: 20%;
transition: 0.6s;
}
section.feature-box.closing div.slides div.slide img{
width: 100%;
height: 100%;
}
#r1:checked ~ .s1 {
margin-left: 0;
}
#r2:checked ~ .s1 {
margin-left: -20%;
}
#r3:checked ~ .s1 {
margin-left: -40%;
}
#r4:checked ~ .s1 {
margin-left: -60%;
}
#r5:checked ~ .s1 {
margin-left: -80%;
}
Try this :
section.feature-box.closing div.slidershow div.header {
font-size: medium;
color: white;
padding-bottom: 20px;
text-align: center;
margin-top: 5px;
position: absolute;
left: 40%;
}
I am trying to accomplish
IMG + text in one row, like in this example
I would like the image to be responsive somehow... so when I resize the window, the image remains there, but also text with background...
Also, I need the text to be vertically aligned... any ideas?
Any help is greatly appreciated! thanks
This may help you, later you can control with media-queries and place your image or content wherever you want.
.img-text {
width: 100%;
display: table;
table-layout: fixed;
}
.photo,
.content {
display: table-cell;
vertical-align: middle;
}
.photo {
width: 40%;
}
.photo img {
max-width: 100%;
height: auto;
}
.content {
width: 60%;
padding: 15px;
}
<div class="img-txt">
<div class="photo">
<img src="http://lorempixel.com/image_output/people-q-c-640-480-6.jpg" alt="">
</div>
<div class="content">
<h1>Something</h1>
<p>Something more</p>
<p>You should have tried yourself first, then asked with your code as example</p>
</div>
</div>
It would be really good if you had posted some of your code. I have already done a similar example, which I would like to share. You need to use positioning for this case. This is a case of fixed-fluid:
+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+
Or
+-------+-----------+
| FIXED | FLUUUUUID |
| | FLUUUUUID |
+-------+-----------+
Fixed-Fluid Model. In my snippet, I have demonstrated two kinds of examples. In the first case, the fluid is less in size. And the next has too long content.
Snippet
.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid</div>
</div>
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>
Working Snippet
.parent {position: relative; margin: 0 0 15px; padding: 5px; padding-left: 100px; min-height: 50px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {}
<div class="parent">
<div class="fixed">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/></div>
<div class="fluid">The Text</div>
</div>
<div class="parent">
<div class="fixed">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/></div>
<div class="fluid">A longer text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magni ipsam facilis laboriosam nesciunt eveniet obcaecati dicta laborum voluptatem reiciendis, possimus vel enim. Dignissimos assumenda ipsa aut. Facere, unde animi.</div>
</div>
.imgBox, .textBox{
float: left;
box-sizing: border-box;
}
.textBox{
height: 70px;
width: 100px;
background-color: grey;
color: white;
text-align: center;
padding-top: 25px;
}
<div>
<div class="imgBox">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" width="100" height="70"/>
</div>
<div class="textBox">
your text
</div>
</div>