I'm sure I've overlooked something here but cannot work it out. There's white space above my second inline-block div, and this only occurs when the 'text here' length in the right div is less than that in the left.
jsFiddle: http://jsfiddle.net/B2S4r/2/ (You'll need to make the HTML view wider to see them along side each other)
<div style="border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;">
<div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;">
<div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;">
</div>
<span class="main_header" style="font-size: 21px; margin: 0;">Title</span>
<br />
Subtitle
</div>
<div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;">
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here
</div>
</div>
<div style="border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;">
<div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;">
<div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;">
</div>
<span class="main_header" style="font-size: 21px; margin: 0;">Title</span>
<br />
Subtitle
</div>
<div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;">
Text here Text here Text here Text here Text here Text here Text here Text here Text
</div>
</div>
Default value of vertical-align is baseline and when applied to blocks of different heights, it's often unwanted.
Applying a value of top will solve your problem. Here's a working fiddle: http://jsfiddle.net/PhilippeVay/B2S4r/3/ (as there's no stylesheet in your fiddle but only inline CSS, I won't even try to find how to aim for the one on the right)
This appears to be a better, cleaner solution: (Example)
<div class="box">
<hgroup>
<h2>Title</h2>
<h3>Subtitle</h3>
</hgroup>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean.</p>
</div>
<style type="text/css">
.box {
border-top: 1px dashed black;
display: inline-block;
width: 250px;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 0;
}
.box hgroup {
height: 50px;
padding-top: 2px;
padding-bottom: 2px;
text-align: right;
font-size: 11px;
border-left: 100px rgb(205, 205, 205) solid;
}
.box h2 {
font-size: 21px;
margin: 0;
font-weight: normal;
}
.box h3 {
font-weight: normal;
}
.box p {
background-color: #efefef;
height: 75px;
padding: 5px;
font-size: 12px;
}
</style>
If you add float:left to both divs, your problem will be resolved.
HTML:
<div class="article">
<div class="header">
<div class="grayBox"></div>
<span class="main_header">Title</span><br />
Subtitle
</div>
<div class="content">
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here
</div>
</div>
<div class="article">
<div class="header">
<div class="grayBox"></div>
<span class="main_header">Title</span><br />
Subtitle
</div>
<div class="content">
Text here Text here Text here Text here Text here Text here Text here Text here Text
</div>
</div>
<div class="clear"></div>
CSS:
.article {
border-top: 1px dashed black;
display: inline-block;
width: 250px;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 0;
float:left;
}
.header {
height: 50px;
padding-top: 2px;
padding-bottom: 2px;
text-align:right;
font-size: 11px;
}
.main_header {
font-size: 21px;
margin: 0;
}
.grayBox {
display: block;
width: 80px;
height: 50px;
float: left;
background-color: #cdcdcd;
background-position: left center;
}
.content {
display:block;
background-color: #efefef;
height: 75px;
padding: 5px;
font-size: 12px;
}
.clear {
clear:both;
}
Live DEMO
a quick solution is adding a float:left to both divs...
<div style=" border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0; float: left;">
...
</div>
(and please use css ;) )
I tried pasting html for 1st block in next one and it worked w/o problem.
<div style=" border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;">
<div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;">
<div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;">
</div>
<span class="main_header" style="font-size: 21px; margin: 0;">Title</span>
<br />
Subtitle
</div>
<div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;">
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here
</div>
</div>
<div style=" border-top: 1px dashed black; display: inline-block; width: 250px; margin-bottom: 10px; margin-right: 10px; margin-top: 0;">
<div style="height: 50px; padding-top: 2px; padding-bottom: 2px; text-align:right; font-size: 11px;">
<div style="display: block; width: 80px; height: 50px; float: left; background-color: #cdcdcd; background-position: left center;">
</div>
<span class="main_header" style="font-size: 21px; margin: 0;">Title</span>
<br />
Subtitle
</div>
<div style="display:block; background-color: #efefef; height: 75px; padding: 5px; font-size: 12px;">
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here
</div>
</div>
You can see updated fiddle here: http://jsfiddle.net/B2S4r/6/
Related
I'm trying to center an image gallery with a lists background symmetrically. No matter the size of the browser. What are some ways I can symmetrically align content
I tried setting a wrapper around the list and the gallery and setting a fixed width but it only changes my image size and not the list background size. I also tried having a float but it changes around everything.
.months {
display: inline-block;
text-align: justify;
color: #808080;
width: 44.4%;
margin-top: 25px;
}
.months ul {
list-style-type: none;
}
.months li {
background-color: #ffffff;
padding: 16px;
border-bottom: 1px solid #808080;
}
.tourCities {
display: inline-block;
width: 260px;
margin: 15px;
background-color: #ffffff;
}
.tourCities img {
width: 100%;
height: auto;
}
http://jsfiddle.net/xza7g439/
I have included a jsfiddle of the code to keep everything neat.
https://imgur.com/a/PnIzxnp This is what I wanted to achieve
https://imgur.com/a/dDt27UE but this is what I get and it doesn't look right hurts my OCD.
You can do this:
CSS
body {
background-color: #000;
box-sizing: border-box;
}
.wrapper{
display: inline-block;
width: 500px; //Set the size here what you want (px, %)
position: relative;
left: 50%;
transform: translateX(-50%);
}
.months {
display: inline-block;
text-align: justify;
color: #808080;
width: 100%;
margin-top: 25px;
}
.months ul {
list-style-type: none;
margin:0;
padding:0;
}
.months li {
background-color: #ffffff;
padding: 16px;
border-bottom: 1px solid #808080;
}
.tourCities {
display: inline-block;
width: calc(50% - 8px);
background-color: #ffffff;
vertical-align: middle;
float: left;
margin: 16px 0px;
}
.cities .tourCities:nth-child(2n+0) {
margin-right:0;
margin-left: 16px; //pixel perfection
}
.tourCities img {
width: 100%;
height: auto;
}
.desc {
text-align: justify;
padding: 5px;
}
.date{
font-weight: 100;
color: #808080;
}
.smlBtn {
color: #ffffff;
background-color: #000000;
border-style: none;
padding: 14px;
}
HTML
<div class="wrapper">
<div class="months">
<ul>
<li>September</li>
<li>October</li>
<li>November</li>
</ul>
</div>
<div class="cities">
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="New york" width="245" height="184">
<div class="desc">
<p>
<b>New York</b>
</p>
<p class="date">Fri 27 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="Paris" width="245" height="184">
<div class="desc">
<p>
<b>Paris</b>
</p>
<p class="date">Sat 28 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="San Francisco" width="245" height="184">
<div class="desc">
<p>
<b>San Francisco</b>
</p>
<p class="date">Sun 29 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
</div>
</div>
DEMO HERE
I have four divs which shows a number, I want to display the words below those numbers. I have tried using the p tag with white-space: pre; in css, but still it does not work:
#c {
padding-top: 30px;
padding-bottom: 30px;
}
.cnum {
background: black;
border-radius: 5px;
color: #fff;
padding: 15px;
margin: 5px;
font-size: 20px;
}
p {
white-space: pre;
}
<div id="c">
<span class='cnum'>27 Text1</span><span class='cnum'>10 Text2</span><span class='cnum'>40 Text 3</span><span class='cnum'>5 Text 4</span>
</div>
HTML
<div id="c">
<div class='cnum'>27 <br/>Text1</div>
<div class='cnum'>10 <br/>Text2</div>
<div class='cnum'>40 <br/>Text 3</div>
<div class='cnum'>5 <br/>Text 4</div>
</div>
CSS
#c{
padding-top:30px;
padding-bottom:30px;
}
.cnum{
background: black;
border-radius: 5px;
color: #fff;
padding: 15px;
margin:5px;
font-size:20px;
max-Width :100px;
float :left
}
Heres a CodePen
If you can't edit the HTML, here's a workaround using word-spacing. Obviously this method is very limited...
#c {
padding-top: 30px;
padding-bottom: 30px;
}
.cnum {
background: black;
border-radius: 5px;
color: #fff;
padding: 15px;
margin: 5px;
font-size: 20px;
display: inline-block;
width: 100px;
word-spacing: 100px;
}
<div id="c">
<span class='cnum'>27 Text1</span><span class='cnum'>10 Text2</span><span class='cnum'>40 Text3</span><span class='cnum'>5 Text4</span>
</div>
I just separated the elements according to the hierarchy so that I could then apply the style. If you observe keep the span tags, but you could replace them with a block element.
I recommend you to learn about inline and block HTML elements and how to convert them in each other.
I hope I have contributed.
#c {
padding-top: 30px;
padding-bottom: 30px;
}
.cnum {
background: black;
border-radius: 5px;
color: #fff;
padding: 15px;
margin: 5px;
font-size: 20px;
display: inline-block;
text-align: center;
}
.cnum span{
display: block;
}
p {
white-space: pre;
}
<div id="c">
<div class="cnum">
<span>27</span>
<span>Text 1</span>
</div>
<div class="cnum">
<span>10</span>
<span>Text 2</span>
</div>
<div class="cnum">
<span>40</span>
<span>Text 3</span>
</div>
<div class="cnum">
<span>5</span>
<span>Text 4</span>
</div>
</div>
If you can edit the html you can do the following, additionally using the pseudo selector ::first-line style the numbers differently
#c {
padding-top: 30px;
padding-bottom: 30px;
}
.cnum {
background: black;
border-radius: 5px;
color: #fff;
padding: 15px;
margin: 5px;
font-size: 20px;
}
.cnum::first-line {
font-size: 30px;
color: yellow;
}
<div id="c">
<div class='cnum'>27 <br/>Text1</div>
<div class='cnum'>10 <br/>Text2</div>
<div class='cnum'>40 <br/>Text 3</div>
<div class='cnum'>5 <br/>Text 4</div>
</div>
I want my email and the word 'email' to align on the right. I understand my email will be longer on the left.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div>
<div>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px;">E-mail</p>
</div>
<br>
<div>
<p style="font-size: 20px; color: white; float: right; padding-right: 10px;">newtrendphotography23#gmail.com</p>
</div>
</div>
</div>
</div>
Nest elements into one parent element, and declare positioning and alignment rules as needed to the parent element.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div>
<div>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px; max-width: 35%;">E-mail: newtrendphotography23#gmail.com</p>
</div>
</div>
</div>
</div>
You can achieve it in two ways.
Firstly put both of them in one paragraph with float:right.
You can use text-align: right; to the <p> to get them right aligned.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 200px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px; max-width: 35%; text-align: right;">
E-mail:
<br> newtrendphotography23#gmail.com
</p>
</div>
</div>
Inside the <p> use a <span> with float: right on the "E-mail:", so that it floats to the right inside the paragraph that is floating to the right.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 200px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px; max-width: 35%;">
<span style="float:right">E-mail: </span>
<br> newtrendphotography23#gmail.com
</p>
</div>
</div>
No.1 is the better solution as the text is by default left-aligned and that is what is causing the issue, not that the text is not floating to the right.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div>
<div style="font-size: 14px; color: white; float: right; padding-right: 10px;text-align:right">
<p>E-mail</p>
<p>newtrendphotography23#gmail.com</p>
</div>
</div>
</div>
</div>
Add style to one div only
basically i have 3 images and a div.contact sitting next to each other contained in a Section.gallery. div.contact has been floated right and relatively positioned but not the images .
My problem is that i cant get the 'NEWSLETTER' in the footer to occupy the available space on the right, it keeps dropping down.
However when apply a clear:both to footer see what happens.It Creates a huge space between the footer and the Section.gallery ,but 'NEWSLETTER' takes up all the space
When i check with google chrome inspect element, there is a big margin that i did not apply.
The relevant code
the HTML part
<section class="gallery">
<div class="display-gallery">
<img src="images/picture.png" />
<img src="images/picture.png" />
<img src="images/picture.png">
</div>
<!--End gallery-->
<div class="contact">
<p>contact</p>
<h2>booking <br />
<span>0123.456.789</span><br />
<span>0123.456.789</span><br />
<span> contact#xidian.com</span>
</h2>
Find out more
</div>
<!--End-->
</section>
<!--End Section-->
<footer>
<div class="nav-wrapper">
<nav class="footer-nav">
<ul>
<li> Home </li>
<li> Biography </li>
<li> Photo Gallery</li>
<li> Calendar </li>
<li> Videos </li>
<li> Contact me </li>
</ul>
<ul class="second-nav">
<li> Home </li>
<li> Biography </li>
<li> Photo Gallery</li>
<li> Calendar </li>
<li> Videos </li>
<li> Contact me </li>
</ul>
</nav>
<div class="more-info">
<h3>some information here</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipis ellt. Cras non nibh
sed vellt ultrices convallis eget vitae leo. Vestibulum porttitor dolor
sed is semper id consequat urna tristique vivamus sodales, nibh id comisam risti.
</p>
</div>
<div class="follow-me">
<h3>follow me </h3>
<a href="">
<img src="images/youtube.png">
</a>
<a href="">
<img src="images/fb.png">
</a>
<a href="">
<img src="images/twitter.png">
</a>
<a href="">
<img src="images/link.png">
</a>
</div>
<div class="newsletter">
<h3>newsletter</h3>
<p>Lorem ipsum dolor sit amet, consectetur<br />adipiscing ellt. Cras non nibh sed.</p>
<input type="text" name="comment" ><br />
<input type="submit" value="Send" >
</div>
</div>
CSS:
.display-gallery img {
width: 215px ;
height:195px;
margin-right: 30px;
border: 1px solid #D9D9D9;
}
.display-gallery img:hover{
transition-duration: 0.5s ;
transform: scale(1.2);
}
.contact {
float: right;
width: 215px ;
height:195px;
position: relative;
top: -199px;
border: 1px solid #D9D9D9;
}
.contact h2 {
font-size: 16px;
text-transform: uppercase;
line-height: 20px;
padding-left: 12px;
}
.contact p {
text-transform: uppercase;
color: #8e3a17;
font-size: 16px;
padding-top: 20px;
padding-bottom: 18px;
padding-left: 12px;
}
.contact a {
margin-top: 10px;
margin-left: 12px;
}
.nav-wrapper {
outline: solid 1px greenyellow;
overflow: hidden;
border-top: 2px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
padding-top: 14px;
padding-bottom: 13px;
}
.footer-nav ul {
float: left;
margin-right: 25px;
}
.footer-nav ul li {
font-size: 10px;
text-transform: uppercase;
line-height: 19px;
}
.second-nav {
margin-right: 25px;
}
.more-info {
border-left: dashed 1px #D9D9D9;
border-right: dashed 1px #D9D9D9;
float: left;
width: 245px;
padding-left: 20px;
padding-right: 20px;
}
.more-info h3 {
font-size: 10px;
text-transform: uppercase;
line-height: 19px;
}
.more-info p {
font-size: 10px;
display: inline-block;
line-height: 13px ;
padding-top: 17px;
width: 210px;
word-break: break-all;
}
.follow-me {
padding: 0 25px 0 25px ;
float: left;
width: 245px;
border-right: 1px dashed #D9D9D9;
}
.follow-me h3 {
text-transform: uppercase;
font-size: 10px;
line-height: 19px;
}
.follow-me img {
padding-top: 17px;
margin-right: 7px;
}
.newsletter {
float: right;
width: 205px;
}
.newsletter h3 {
text-transform: uppercase;
font-size: 10px;
line-height: 19px;
padding-bottom: 7px;
}
.newsletter p {
font-size: 10px;
display: inline-block;
line-height: 13px;
padding-bottom: 6px;
}
input[type= text] {
width: 205px;
height: 20px;
border: 1px solid #D9D9D9;
}
input[type = submit] {
margin-top: 7px;
float: right;
display: inline-block;
background-color: #8e3a17;
font-size: 11px;
color: white;
width: 55px;
height: 20px;
line-height: 15px;
text-align: center;
box-shadow: 1px 1px 2px #8e3a17;
}
Ps:i did apply a css reset
Sorry about the long post
Update the css as follows:
.gallery {
overflow: hidden;
}
.display-gallery {
float: left;
}
.contact {
float: right;
width: 215px ;
height:195px;
/*position: relative;
top: -199px;*/
border: 1px solid #D9D9D9;
}
your first div "display-gallery" catches all the width of the screen. so your "contact" floating right div is added at the bottom of the div block. (remove the "top: -199px" from the second div "contact" and you'll see why when you add clear: both to footer you got this gap).
The margin you get right to the footer is a placeholder of the ".contact" div to which you apply "top: -199px"
You can't have two legends for a given fieldset, but is there a way to get a legend effect without using the <legend> tag?
<!-- left legend -->
<fieldset>
<legend>
Some Text
</legend>
</fieldset>
I can add align=right to the legend tag to make it on the right-hand side, but again, I can't have two legends. I'd like to have a legend to the left, and something like a legend to the right. Something like the image below.
How can I accomplish this using HTML and CSS? Here's a Fiddle, I basically want to combine these two. On the left would be regular legend text, and to the right would be a dropdown if it matters.
Update
Here's some code I'm working with :
#shifter {
position: relative;
}
#cataright {
position: absolute;
top: -25px;
right: 20px;
font-weight: bold;
}
.grey {
padding: 15px;
padding-left: 30px;
padding-right: 30px;
border: solid black 3px;
border-radius: 7px;
background-color: #DDDDDD;
}
<fieldset class="grey" id="shifter">
<legend>
Title
</legend>
<div id="cataright">
Sort by
<select id="sort" onchange="sort();">
<option value="original">Release Date</option>
<option value="popularity">Popularity</option>
<option value="rating">Highest Rated</option>
</select>
</div>
</fieldset>
You can do that by adding an extra element and positioning it absolutly in the <fieldset> :
fieldset {
position: relative;
}
.legend2 {
position: absolute;
top: -0.2em;
right: 20px;
background: #fff;
line-height:1.2em;
}
<fieldset>
<legend>
Some Text
</legend>
<div class="legend2">Some other Text</div>
</fieldset>
You can use :after pseudo selector to achieve this. SEE THE DEMO.
This way, you don't have to use any additional html tags.
fieldset {
position: relative;
}
fieldset:after {
content: "Some Text";
position: absolute;
margin-top: -25px;
right: 10px;
background: #fff;
padding: 0 5px;
}
I had the same problem, but the answers here did not satisfy me. So I developed my own solution.
My solution is based on div-Tags. Just play with the width of the legend Tag and the width of the div Tag. Also you can set more Text.
Beneath you can find three different examples.
<fieldset style="border: 1px solid black; width: 500px; height: 100px; margin: 1em auto;">
<legend style="width: 100%; padding: 0;">
<div style="display: inline-block; line-height: 1.2;">
<div style="float: left; padding: 0 5px;">Legend</div>
<div style="float: left; height: 1px; background-color: black; width: 359px; margin-top: 11px;"></div>
<div style="float: left; padding: 0 5px;">Other Stuff</div>
</div>
</legend>
</fieldset>
<fieldset style="border: 1px solid black; width: 500px; height: 100px; margin: 1em auto;">
<legend style="width: 81%; padding: 0;">
<div style="display: inline-block; line-height: 1.2;">
<div style="float: left; height: 1px; background-color: black; width: 78px; margin-top: 11px;"></div>
<div style="float: left; padding: 0 5px;">Legend</div>
<div style="float: left; height: 1px; background-color: black; width: 186px; margin-top: 11px;"></div>
<div style="float: left; padding: 0 5px;">Other Stuff</div>
</div>
</legend>
</fieldset>
<fieldset style="border: 1px solid black; width: 500px; height: 100px; margin: 1em auto;">
<legend style="width: 90%; padding: 0;">
<div style="display: inline-block; line-height: 1.2;">
<div style="float: left; height: 1px; background-color: black; width: 39px; margin-top: 11px;"></div>
<div style="float: left; padding: 0 5px;">Legend</div>
<div style="float: left; height: 1px; background-color: black; width: 88px; margin-top: 11px;"></div>
<div style="float: left; padding: 0 5px;">More Stuff</div>
<div style="float: left; height: 1px; background-color: black; width: 102px; margin-top: 11px;"></div>
<div style="float: left; padding: 0 5px;">Other Stuff</div>
</div>
</legend>
</fieldset>
Note: display inline-block and line-height: 1.2 are necessary for cross browser compatibility.
Ok, I've managed to do it without the background color "hack", or using the fieldset tag,
The only caveat is that trying to get rounded corners may be a bit tricky.
Basically our "panel" will be a box where we draw its left, bottom and right borders.
Then our "panel-title" element will be absolutely positioned at the top of the panel.
Each panel span takes up exactly 50% of the panel width and uses display flex to do the magic. For the first span, we use the before element to draw the border 1em in width from the left-hand side, and then the after element we set the "flex-grow: 1" to tell it to take up the rest of the space.
Then we do exactly the same for the last span except having the width and flex-grow properties reversed.
i.e. the last span's before element will instead be set to flex-grow: 1 and its after element will have a width of 1em.
Anyway, check the snippet below.
* {
box-sizing: border-box;
}
body {
background:url(https://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
background-size:cover;
background-position:center center;
background-attachment:fixed;
margin: 0;
font-family: 'Roboto Slab';
}
.panel {
background: rgba(0,0,0,0.8);
width: 75vw;
height: -webkit-max-content;
height: max-content;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
padding: 0.5em 1em;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
.panel-title {
display: flex;
position: absolute;
left: 0;
right: 0;
top: -25px;
height: 30px;
line-height:30px;
font-size: 30px;
white-space: nowrap;
text-shadow: 2px 2px 1px rgba(0,0,0,0.8);
}
.panel-title > span {
display: flex;
width: 50%;
}
.panel-title > span:before,
.panel-title > span:after {
content: '';
border-bottom:1px solid #fff;
margin-bottom:5px;
align-self:flex-end;
}
.panel-title > span:first-child:before {
width: 1em;
margin-right: 5px;
}
.panel-title > span:first-child:after {
margin-left: 5px;
flex-grow: 1;
}
.panel-title > span:last-child:before {
flex-grow: 1;
margin-right: 5px;
}
.panel-title > span:last-child:after {
width: 1em;
margin-left: 5px;
}
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<div class='panel'>
<DIV class='panel-title'>
<SPAN>Foo Bar</SPAN>
<SPAN>Snee</SPAN>
</DIV>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere tempus mauris at tincidunt.</P>
<P>Phasellus facilisis leo tortor, nec molestie purus dignissim non. Integer massa turpis, porta sed erat sed.</P>
</div>
Here is a responsive version using Bootstrap.
The custom CSS pushes the second legend up into place.
.legend {
position: relative;
top: -3.4em;
margin-bottom: -3.4em;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<fieldset class="container border">
<legend class="float-none w-auto p-2">Legend 1</legend>
<div class="row legend">
<div class="col-12">
<span class="p-2 bg-white float-end">
Legend 2
<select></select>
</span>
</div>
</div>
</fieldset>