Content floated

HTML & CSS
1

Hi

This code to generate examples above, will be created dynamically. Beside the green rectangle can have 1,2,3,etc… bars.
I’m showing above some scenarios.

I need to do this:
Scenario 1:

743×306 5.62 KB

Scenario 2:
748×383 7.27 KB

Scenario 3:
743×500 12.4 KB

Can you help me?

Thank you

2

Is this for an assignment? If it is, you won’t learn by having us do it for you. Even if it is not an assignment it is better if you show us the code you have written so far for this. Then we can give you a hand where you have problems.

3

Thanks for you reply. No, is for me. I do not know if you can do what I want, should be, but i dont know how.

        <div style="float: left; width: 250px; background-color: green;">
            asdfasdf<br>
            asdfasdf<br>
            asdfasdf<br>
            asdfasdf<br>
            asdfasdf<br>
            asdfasdf<br>
        </div>
        <div>
            <div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; width:600px;">
                <span class="fa fa-briefcase space-left" aria-hidden="true"></span> 
                <span class="text-title-right">Test</span>
                <p style="color: #000000;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>

            </div>
        </div>
        <div style="clear:left;">
        <div>
            <div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; width:600px;">
                <span class="fa fa-briefcase space-left" aria-hidden="true"></span> 
                <span class="text-title-right">Test</span>
                <p style="color: #000000;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>

            </div>
        </div>
        </div>
4

Hi there Ahtylus,

you have to be a little bit sneaky to achieve that effect. :smiling_imp:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
    background: #f0f0f0;
 }
#container {
    max-width: 58em;
    padding: 1em;
    margin: auto;
    border: 0.1em solid #999;
    background: #fff;
    box-shadow: 0.5em 0.5em 0.5em #999;
    overflow: hidden;
 }
.box {
    float: left;
    width: 9em;
    height: 12em;
    border-right: 0.5em solid #fff;
    background: #1cb34b;
 }
.bar {
    line-height: 2.5em;
    padding: 0 1em;
    background: #000;
    color: #fff;
    text-indent: 2em;
 }
</style>

</head>
<body> 

<div id="container">
<span class="box"></span>
<div class="bar">Test</div>
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
 Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
 sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
 nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
 odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
 Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
 purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
<div class="bar">Test</div>
<p>
 Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
 purus vitae lobortis.
</p>
<span class="box"></span>
<div class="bar">Test</div>
<p>
 Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, 
 odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. 
In nibh sem. 
</p>
<div class="bar">Test</div>
<p>
 Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, 
 odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. 
 In nibh sem. quis placerat diam sodales ac. Curabitur vitae porta ex.
</p>
<div class="bar">Test</div>
<p>
 Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, 
 odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. 
 In nibh sem, 
</p>
<span class="box"></span>
<p>
Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
 odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
 Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
 purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
<!-- #container --></div>
</body>
</html>

coothead

2 Likes
5

WOoW. Working like a charm. Thanks for your time. Good trick.

6

 
 
    No problem, you’re very welcome. :sunglasses:

coothead

1 Like
7

One more thing… i can’t add a border-left: 15px solid #37afd2; in all bar’s?

Now, only show in some bars…i wanna in all bars.

http://image.prntscr.com/image/c62b1ccede6549c78a6e757627c7c63b.png

Is possible?

8

Hi there Ahtylus,

almost anything is possible if you try hard enough. :sunglasses:

You just have to learn how to to be sneaky. :mask:

It is no good using a border, because, as you have discovered,
it has a nasty habit of hiding behind your green boxes, so instead
you need to use something that will act in a similar way to the text. :ok:

In this case the “span element” will get the job done. :cool:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
    background: #f0f0f0;
 }
#container {
    max-width: 58em;
    padding: 1em;
    margin: auto;
    border: 0.1em solid #999;
    background: #fff;
    box-shadow: 0.5em 0.5em 0.5em #999;
    overflow: hidden;
 }
.box {
    float: left;
    width: 9em;
    height: 12em;
    border-right: 0.5em solid #fff;
    background: #1cb34b;
 }
.bar {
    line-height: 2.5em;
    background: #000;
    color: #fff;
 }
.bar span {
    display: inline-block;
    width: 1em;
    height: 2.5em;
    margin-right: 2em;
    vertical-align: bottom;
    background: #37afd2;
 }
</style>

</head>
<body> 

<div id="container">
<span class="box"></span>
<div class="bar">
  <span></span>Test
 </div>
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
 Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
 sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
 nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
 odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
 Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
 purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
<div class="bar">
  <span></span>Test
 </div>
<p>
 Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
 purus vitae lobortis.
</p>
<span class="box"></span>
<div class="bar">
  <span></span>Test
 </div>
<p>
 Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, 
 odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. 
In nibh sem. 
</p>
<div class="bar">
  <span></span>Test
 </div>
<p>
 Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, 
 odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. 
 In nibh sem. quis placerat diam sodales ac. Curabitur vitae porta ex.
</p>
<div class="bar">
  <span></span>Test
 </div>
<p>
 Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, 
 odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. 
 In nibh sem, 
</p>
<span class="box"></span>
<p>
Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
 odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
 Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
 purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
<!-- #container --></div>
</body>
</html>

coothead

1 Like
9

I was trying now something like you.
Thanks one more time. :smiley:

10

Following @coothead’s lead, this is another way of handling the title bar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <title>left border in title bar</title>
    <style media="screen">
body {
    background:#f0f0f0;
}
#container {
    max-width:58em;
    padding:1em;
    margin:auto;
    border:0.1em solid #999;
    background:#fff;
    box-shadow:0.5em 0.5em 0.5em #999;
    overflow:hidden;
}
.box {
    float:left;
    width:9em;
    height:12em;
    border-right:0.5em solid #fff;
    border-left:0;
    background:#1cb34b;
}
.bar {
    background:#000;
}
.bar span {
    display:inline-block;
    border-left:15px solid #37afd2;
    line-height:2.5em;
    color:#fff;
    text-indent:2em;
}
    </style>
</head>
<body> 

<div id="container">
   <span class="box"></span>
   <div class="bar"><span>Test</span></div>
   <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
       bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
       posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
       Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
       sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
       nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
       odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
       Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
       purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
   </p>
   <div class="bar"><span>Test</span></div>
   <p>
       Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
       purus vitae lobortis.
   </p>
   <span class="box"></span>
   <div class="bar"><span>Test</span></div>
   <p>
       Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, 
       odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. 
       In nibh sem. 
   </p>
   <div class="bar"><span>Test</span></div>
   <p>
       Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, 
       odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. 
       In nibh sem. quis placerat diam sodales ac. Curabitur vitae porta ex.
   </p>
   <div class="bar"><span>Test</span></div>
   <p>
       Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, 
       odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. 
       In nibh sem, 
   </p>
   <span class="box"></span>
   <p>
       Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
       odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
       Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
       purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
   </p>
</div> <!-- #container -->

</body>
</html>
11

I found one bug, both solutions has the same problem…any solution?. :frowning:

http://image.prntscr.com/image/be1648f64da84d3bbb6eae3d37570c3f.png

**

PS: The size of green box is variable.

**

12

Oops, back to the drawing board… :blush:

Ah, the solution seems impressively simple. Simplify the .bar code… HTML and CSS. No inner span required. Tested in FF and Chrome.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <title>left border in title bar</title>
    <style media="screen">
body {
    background:#f0f0f0;
}
#container {
    max-width:58em;
    padding:1em;
    margin:auto;
    border:0.1em solid #999;
    background:#fff;
    box-shadow:0.5em 0.5em 0.5em #999;
    overflow:hidden;
}
.box {
    float:left;
    width:9em;
    height:12em;
    border-right:0.5em solid #fff;
    border-left:0;
    background:#1cb34b;
}
.bar {
    background:#000;
    border-left:15px solid #37afd2;
    line-height:2.5em;
    color:#fff;
    text-indent:2em;
    overflow:hidden;
}
    </style>
</head>
<body> 

<div id="container">
   <span class="box"></span>
   <div class="bar">Test</div>
   <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
       bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
       posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
       Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
       sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
       nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
       odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
       Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
       purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
   </p>
   <div class="bar">Test</div>
   <p>
       Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
       purus vitae lobortis.
   </p>
   <span class="box"></span>
   <div class="bar">Test</div>
   <p>
       Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, 
       odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. 
       In nibh sem. Phasellus rutrum lacus at dolor placerat feugiat. Phasellus rutrum lacus at dolor placerat feugiat. Phasellus rutrum lacus at dolor placerat feugiat. Phasellus rutrum lacus at dolor placerat feugiat.
   </p>
   <div class="bar">Test</div>
   <p>
       Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, 
       odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. 
       In nibh sem. quis placerat diam sodales ac. Curabitur vitae porta ex.
   </p>
   <div class="bar">Test</div>
   <p>
       Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, 
       odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. 
       In nibh sem, 
   </p>
   <span class="box"></span>
   <p>
       Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
       odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
       Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
       purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
   </p>
</div> <!-- #container -->

</body>
</html>
2 Likes
13

Thanks u so much. :smiley:
A big thanks to @coothead too.

2 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.