I am creating a Bootstrap popover to show some information. There will be one or more pieces, each containing a icon and some text.
I am also using twig for this if that changes anything.
HTML
<span class="fa fa-user instructor-contact-info-header"></span>
<div class="contact-info-container">
<p class="instructor-contact-info-header">
{{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>
<p class="instructor-contact-info-data">Put other stuff here</p>
CSS I have
.instructor-contact-info-header {
display: inline-block;
color: #005993;
margin: 0;
}
How it looks:
#
text text text text text text
text text text text text text
text text text text text text
What I am trying to get:
# text text text text text text
text text text text text text
text text text text text text
# text text text text text text
text text text text text text
text text text text text text
EDIT:
After implementing the solution. Popovers with multiple people's contact info shows as follows:
# text text text text text text #
text text text text text text
text text text text text text
# text text text text text text
text text text text text text
text text text text text text
You have a span (inline element) next to a div (a block element). So the div is a new line. Just make the div inline-block as well to fix it:
.instructor-contact-info-header {
display: inline-block;
color: #005993;
margin: 0;
}
.contact-info-container {
display: inline-block;
vertical-align: top;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<span class="fa fa-user instructor-contact-info-header"></span>
<div class="contact-info-container">
<p class="instructor-contact-info-header">
{{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>
<p class="instructor-contact-info-data">Put other stuff here</p>
</div>
<div>
<span class="fa fa-user instructor-contact-info-header"></span>
<div class="contact-info-container">
<p class="instructor-contact-info-header">
{{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>
<p class="instructor-contact-info-data">Put other stuff here</p>
</div>
<div>
<span class="fa fa-user instructor-contact-info-header"></span>
<div class="contact-info-container">
<p class="instructor-contact-info-header">
{{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>
<p class="instructor-contact-info-data">Put other stuff here</p>
</div>
UPDATE:
Just wrap the whole thing in a div so it is block level.
Related
I am trying to make it so one <div> is on the same line/row another <div> by default they just appear below each other. I have found out that this only happens when the text is multiple lines. Here is the code:
h1 {
text-align: center;
}
h2 {
text-align: left;
}
.info {
text-align: left;
font-size: 20px;
float: right;
}
.content {
align-self: auto;
border: 1px solid black;
color: gray;
width: 150px;
max-width: 150px;
float: left;
}
.p1 {
text-align: left;
margin-left: 10px;
}
<h1>Good Health and Well being</h1>
<div class='info'>
<h2><b>What do good health and well-being mean?</b></h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
<h2><b>Why are good health and well-being so important?</b></h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
<h2><b>How do you keep good health?</b></h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
</div>
<div class='content'>
<h1>Content</h1>
<p class='p1'>content</p>
</div>
Here is an image of it.
And here is an image when the text doesn't use multiple lines:
Lastly here is an image of what i want
Reason this is happening is because that having multilines increases the width of your info div. It keeps on adjusting till it becomes (100%-150px) 150 being the width of your content div. Adding width to info will solve the issue , add the width such to give margin in between as I have updated the css.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
.info {
text-align: left;
font-size: 20px;
float: right;
width: calc(100% - 200px)
}
.content {
align-self: auto;
border: 1px solid black;
color: gray;
width: 150px;
max-width: 150px;
float: left;
}
.p1 {
text-align: left;
margin-left: 10px;
}
<h1>Good Health and Well being</h1>
<div class='info'>
<h2><b>What do good health and well-being mean?</b></h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
<h2><b>Why are good health and well-being so important?</b></h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEX </p>
<h2><b>How do you keep good health?</b></h2>
<p>T TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
</div>
<div class='content'>
<h1>Content</h1>
<p class='p1'>content</p>
</div>
The div element is a block level element, but there is a way you can bypass that while styling it through css.
Firstly, you'd give the divs the same id attribute since they have different classes. Then through the css file you could add the float attribute, whose values can be either left or right.
So it could look something like this
<h1>Good Health and Well being</h1>
<div class='info' id="box">
<h2><b>What do good health and well-being mean?</b></h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
<h2><b>Why are good health and well-being so important?</b></h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
<h2><b>How do you keep good health?</b></h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
</div>
<div class='content' id="box">
<h1>Content</h1>
<p class='p1'>content</p>
</div>
#box {
float: left;
}
Playing around with the size (width and height) of each individual div can help you make them fit nicely. Or an alternative is using the position attribute, but I find using float much less of a pain.
There are multiple ways you can inline div's side by side. Using float can be tricky and will require clearing of div elements to stack properly.
There are some good new properties of CSS for setting Grids of elements. One in the example below is using the flex property on the parent container of both div's you want to be side by side. There is another CSS style property grid, which can be a little difficult to understand at first but its best when you get used to it.
<!DOCTYPE html>
<html>
<body>
<style>
.flex {
display: inline-flex;
flex-flow: nowrap;
justify-content: space-between;
}
.info,.content {
width: 49%;
}
.content{
background: lightgray;
padding: 1rem
}
</style>
<div class="flex">
<div class='info'>
<h2>
<b>What do good health and well-being mean?</b>
</h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
<h2>
<b>Why are good health and well-being so important?</b>
</h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
<h2>
<b>How do you keep good health?</b>
</h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
</div>
<div class='content'>
<h1>Content</h1>
<p class='p1'>content</p>
</div>
</div>
</body>
</html>
Hope this helps you.
I have a standard Bootstrap grid layout that's been vertically centered.
However, upon window resize, the div content overflows the window, obscuring the top div content. How can I prevent this?
Please see minimal example here: http://jsfiddle.net/8pkubef7/
<div style="width:50%;position:absolute;top:50%;left:25%; transform: translateY(-50%);">
<div class="container">
<div class="row">
<div class="col">
<h1> Header 1 </h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end vertical center div -->
Try this:
<div class="container">
<div class="floating">
<div class="row">
<div class="col">
<h1>
Header 1
</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>
</div>
css:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
word-break: break-all;
}
.container {
position:relative;
}
.floating {
float: left;
position: absolute;
left:25%;
right:25%;
top: 50%;
}
http://jsfiddle.net/c6eyq2rn/
I want to wrap the contents of a div around another sibling div (NOT a nested DIV)
The code example below comes very close. But what I need is for the contents of the DIV on the left so slide down enough to allow a few lines of the content of the right DIV to flow over the top (as it does on the bottom)
Here is full working HTML doc that demonstrates what is working so far, except for the text flowing on the top.
div.wrapper {
width: 500px;
}
div.Cover {
float: left;
width: 250px;
height: 350px;
margin: 10px;
padding: 10px;
border: 3px solid orange;
background-color: aqua;
}
div.Content {
padding: 5px;
}
<div class="wrapper">
<div class="Cover"></div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text text</div>
</div>
If an html solution is enough, just position that div under a few Content divs in the html.
Before:
<div class="Cover"></div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
After:
<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
<div class="Cover"></div>
I'm not sure there is a css solution. Margin-top, top, both clear the space but don't allow floated elements past.
This just means that floated div is relative to the text content, not to the page.
What I think you really want, but can't use yet, are CSS Exclusions: https://www.w3.org/TR/css3-exclusions/. They're only supported in IE/Edge as of this writing, and only with the -ms prefix.
This article shows some practical examples: http://www.html5rocks.com/en/tutorials/regions/adobe/.
If you're able to paste this somewhere, anywhere after the html, this accomplishes the same thing using javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('.wrapper').prepend($('.Content:nth-of-type(2)'))
</script>
I've successfully aligned one line of text with an image (fiddle).
<div class="profile-details-wrapper">
<img class="profile-picture" src="http://placehold.it/50x50" />
<span class="profile-details">
username
</span>
</div>
However, when I try to add another line of text, it wraps under the image (fiddle).
<div class="profile-details-wrapper">
<img class="profile-picture" src="http://placehold.it/50x50" />
<span class="profile-details">
username
<br />
username
</span>
</div>
How can I have multi-line text that exceeds the height of the image next to it, but does not wrap underneath it?
Bonus question: How would I go about aligning it vertically, too?
Building on #freestock.tk's tabular example..
.profile-details-wrapper { display: table-row; }
.profile-picture {
display: table-cell;
vertical-align: top;
margin-right: 10px;
}
.profile-details { display: table-cell; vertical-align: top; }
<div class="profile-details-wrapper">
<img class="profile-picture" src="http://placehold.it/50x50">
<div class="profile-details">
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 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 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 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>
img {
float:left;
margin-top: 5px;
margin-right: 15px;
margin-bottom: 15px;
}
p {
display: table-cell;
width: 400px;
}
<div class="profile-details-wrapper">
<img class="profile-picture" src="http://placehold.it/50x50" />
<span class="profile-details">
<p>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 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 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 text here text here text here text here text here text here text here text here text here text here text here text here </p>
</span>
</div>
How about giving a float: left; tag to both the picture and the description. I don't Know if that creates complications in your website but that way it will keep all the text on the left side
This is a bit hackish, but it should work...
.profile-picture {
display: block;
margin: 0 10px 10px 0;
float: left;
}
.profile-details { float: left; width: calc(100% - 50px - 10px); }
<div class="profile-details-wrapper">
<img class="profile-picture" src="http://placehold.it/50x50">
<div class="profile-details">
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 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 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 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>
Here is the link to the problem. http://garethjweaver.com/portfolio/gjw/index.php?page=gjw
Trying to create a container without having to use overflow. I have my main container for all of the content like so.
.container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
So far so good, I test it by placing a border around it and it shows it covers all of the content.
Now when I try and do another container for another section it doesn't work. Like so.
http://jsfiddle.net/4wN8q/
This is the other container I'm trying to create..
.portfolio-container {
width: 980px;
margin-left:auto;
margin-right:auto;
}
But when I add a border around it it doesn't cover all of the content, it just stays at the top covering nothing. overflow:auto can fix this although when I'm trying to make my images responsive the scroll bar shows up down the bottom and it doesn't scale and it will work if I take overflow out.
Thanks in advance.
EDIT: Updated to include the code for it
<div class="portfolio-container">
<div class="content-container">
<div class="content">
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text
</div>
<div class="arrows">
<a class="portfolio-button" href="#">Visit Website</a>
<i class="float-left fa fa-arrow-circle-o-left fa-3x"></i>
<i class="float-right fa fa-arrow-circle-o-right fa-3x"></i>
</div>
</div>
<div class="portfolio-images">
<img class="image-padding"src="./images/cz1-chrome.png">
<img src="./images/cz-chrome.png">
</div>
Had to change the image stylings instead of removing overflow