How to wrap one div around another? I have following two div ids:
#course {
width: 325px;
padding-right: 25px;
border-right: 1px solid #999;
border-top: 1px solid #999;
}
#home-page-sign-up {
width: 275px;
#padding-left: 25px;
float: right;
margin: auto;
#position: relative;
display: block;
clear: both;
}
I want #course to be on left and #home-page-sign-up on right just next to it. I do get block on left and right as assigned but one is below another, I want them to be side by side.
How can I achieve it?
You will want to float both of them left:
#course{
float:left;
width:325px;
padding-right:25px;
border-right:1px solid #999;
border-top:1px solid #999;
}
#home-page-sign-up {
width:275px;
#padding-left:25px;
float:left;
margin: auto;
#position:relative;
display:block;
}
Just make sure #course falls first in the html
Try this:
#course{
width:325px;
float:left;
padding-right:25px;
border-right:1px solid #999;
border-top:1px solid #999;
}
#home-page-sign-up {
width:275px;
#padding-left:25px;
float:left;
margin: auto;
#position:relative;
}
Then, in your body tags, do:
<div id="course">Course Div Content here...</div>
<div id="home-page-sign-up">Home Sign-up Content here...</div>
<div style="clear: left;"></div>
That's one way...that hopefully works ;)
I dont know what you mean by "wrap around" but if you want the divs to be next to each other, put float: left; in both styles...
see fiddle for code and demo
Fiddle: http://jsfiddle.net/t4LUF/3/
Demo: http://jsfiddle.net/t4LUF/3/embedded/result/
NOTE: For demo purpose i gave border to all div's you can change as per your need.
HTML:
<div id="big-container">big-container
<div id="container">
<div id="course">course Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="home-page-sign-up">home-page-sign-up </div>
</div>
</div>
SS: http://img812.imageshack.us/img812/3783/divcontainersidebyside.jpg
Related
The above photo is the output of the CSS code; it was supposed to display 2 columns (#leftcolumn and #rightcolumn) with some random text inside the 2 columns respectively, but the output displayed just the #leftcolumn with the text in it alone.
Please, how do I solve it?
body {
margin: 0;
padding: 0;
line-height: 1.5em;
}
#header {
background: black;
font-family: Arial;
height: 100px;
}
#contentwrapper {
float: left;
width: 100%;
}
#contentcolumn {
margin: 0px 230px 0px 230px;
}
#leftcolumn {
float: left;
width: 230px;
margin-left: -230px;
background: #f0071b;
}
#rightcolumn {
float: left;
margin-left: -230%;
width: 230px;
background: #20e6d2;
}
.innertext {
margin: 20px;
font-family: Arial;
color: #d6a7c4;
text-align: justify;
}
#footer {
clear: left;
/* Cannot float on left */
width: 100%;
background: #000000;
color: #FFF;
font-family: Arial;
text-align: center;
padding: 4px;
}
/* Navigation Bar Begins here */
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-size: #000;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #d2f7f0;
}
.active {
background-color: #025dfa;
}
/* Responsive Css Layout */
#media (max-width: 840px) {
/* drop Right Column Drop Down */
#leftcolumn {
margin-left: -100px;
}
#rightcolumn {
float: none;
width: 100% margin-left: 0;
clear: both;
}
#contentcolumn {
margin-right: 0;
/* left margin to leftcolumnWidth */
}
}
#media (max-width: 600px) {
/* Drop left column down */
#leftcolumn {
float: none;
width: 100%;
clear: both;
margin-left: 0;
}
#contentcolumn {
margin-left: 0;
}
}
<div id="container">
<div id="header">
<ul style="display: inline;">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertext">
<b>Welcome!</b><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br />Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at
its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors
now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and
the like).
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertext">
<b>The left Column: <em>230px</em></b><br />Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes
from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
</div>
</div>
<div id="rightcolumn">
<div class="innertext">
<b>The right column:<em>230px</em></b><br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first
true generator on the Internet.
</div>
</div>
<div id="footer">Footer</div>
</div>
margin-left: -230%; moves the element out of the visible area (230% to the left). Erase that and you'll see it again.
Or did you mean pixels instead of percent?
As I understood I created a design using your code. Get some Idea if you expect this way
I have used
display:flex
method, have a look
.header{
background: black;
font-family: Arial;
height: 100px;
}
.contentwrapper{
display: flex;
}
.footer{
clear: left;
width: 100%;
background: #000000;
color: #FFF;
font-family: Arial;
text-align: center;
padding: 4px;
}
.leftcolumn {
background: #f0071b;
}
.rightcolumn {
background: #20e6d2;
}
/* Navigation Bar Begins here */
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-size: #000;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #d2f7f0;
}
.active {
background-color: #025dfa;
}
<div id="container">
<div class="header">
<ul style="display: inline;">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div class="contentwrapper">
<div class="leftcolumn">
<b>The left Column: <em>230px</em></b><br />Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes
from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
</div>
<div class="innertext">
<b>Welcome!</b><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br />Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page
editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour
and the like).
</div>
<div class="rightcolumn">
<b>The right column:<em>230px</em></b><br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the
first true generator on the Internet.
</div>
</div>
<div class="footer">Footer</div>
</div>
I have made a tooltip on hover over an icon and it works fine in desktop view.
Working Snippet:
.tooltip {
position: relative;
display: inline-block;
}
.tooltip img {
width: 15px;
}
.tooltip .tooltiptext[data-position="bottom"] {
visibility: hidden;
width: 400px;
background-color: #fff;
color: #000;
text-align: center;
border-radius: 0.5rem;
border-width: 1px;
border-color: #e2e8f0;
padding: 5px;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<label> Some Label </label>
<span className="ml-2">
<div class="tooltip">
<img
src="https://www.svgrepo.com/show/2297/doubts-button.svg"
alt="help text"
/>
<span data-position="bottom" class="tooltiptext">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</span>
</div>
</span>
Whereas in mobile view, this leads to horizontal scroll bar.
Please switch to mobile view to see the issue.
Things I tried:
I have tried removing margin-left and modified left value like,
.tooltip .tooltiptext[data-position="bottom"] {
visibility: hidden;
width: 400px;
.
.
.
.
.
left: 0%;
margin-left: 0px;
}
But this doesn't work... Kindly please help me to make this tooltip responsive in mobile devices using CSS. Big thanks in advance.
Just add the following css:
#media screen and (max-width: 576px) {
.tooltiptext {
width: 300px;
}
}
I am trying to follow this Mozilla Tutorial on floats and am trying to do the exercises.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats
I have a left floated div with a Paragraph element to the right of it which has a pink background. I am trying to make the bottom of the Pink Paragraph box wrap around the bottom of the blue Div, and not stop when the text finishes, like it advises me to do in the Mozilla Tutorial. However I am not able to do it at all, and I have tried using all of the methods they have shown.
Please can somebody advise me
I have tried using
Overflow: auto;
Display: flow-root;
body { width:90%;
margin: 0 auto;
background: #AAB7B8;}
.wrapper { display: flow-root;}
.box { border: solid 1px;
background: blue;
border-radius: 5px;
width: 200px;
height: 200px;
float: left;
margin: 20px;
text-align: center;
}
p { background: #F6DDCC;
padding:20px;}
.cleared { clear: left;
background: yellow;}
<div class="wrapper">
<div class="box">
Float
</div>
<p> Many variations of Lorem Ipsum exist today, and sometimes the
text is altered to include humorous phrases.
If you’re going to be using Lorem Ipsum as filler text on your pages,
you need to make sure that the passage doesn’t contain potentially
embarrassing information.
Using our Lorem Ipsum generator, you can easily select a variation to
build your desired number of Lorem Ipsum paragraphs, sentences, or
words.In addition, our generator can insert HTML markup. </p>
<p class="cleared"> when a printer jumbled a gallery of type to
create a type specimen book, Lorem Ipsum has been the industry
standard for dummy text.
Today, a variety of software can create random text that resembles
Lorem Ipsum. For example, Apple’s Pages and Keynote software use
scrambled placeholder text. And Lorem Ipsum is featured on Google
Docs, WordPress, and Microsoft Office Word.
</p>
</div>
If I understand correctly.. something like the below...
All I did was add...
.wrapper { background: #F6DDCC;}
And removed the background color from the paragraph tag.
p { padding:20px;}
So the background color is applied to the containing div and not the paragraph elements.
body { width:90%;
margin: 0 auto;
background: #AAB7B8;}
.wrapper { display: flow-root;}
.box { border: solid 1px;
background: blue;
border-radius: 5px;
width: 200px;
height: 200px;
float: left;
margin: 20px;
text-align: center;
}
.wrapper { background: #F6DDCC; }
p { padding:20px;}
.cleared { clear: left;
background: yellow;}
<div class="wrapper">
<div class="box">
Float
</div>
<p> Many variations of Lorem Ipsum exist today, and sometimes the
text is altered to include humorous phrases.
If you’re going to be using Lorem Ipsum as filler text on your pages,
you need to make sure that the passage doesn’t contain potentially
embarrassing information.
Using our Lorem Ipsum generator, you can easily select a variation to
build your desired number of Lorem Ipsum paragraphs, sentences, or
words.In addition, our generator can insert HTML markup. </p>
<p class="cleared"> when a printer jumbled a gallery of type to
create a type specimen book, Lorem Ipsum has been the industry
standard for dummy text.
Today, a variety of software can create random text that resembles
Lorem Ipsum. For example, Apple’s Pages and Keynote software use
scrambled placeholder text. And Lorem Ipsum is featured on Google
Docs, WordPress, and Microsoft Office Word.
</p>
</div>
You need to wrap box and the paragraph <p> with a div and set the wrapping div with the background color
body {
width:90%;
margin: 0 auto;
background: #AAB7B8;
}
.p-wrapper{
background: #F6DDCC;
padding: 20px;
display: flow-root;
}
.box {
border: solid 1px;
background: blue;
border-radius: 5px;
width: 200px;
height: 200px;
float: left;
margin: 20px;
text-align: center;
}
p { background: #F6DDCC;
padding:20px;}
.cleared { clear: left;
background: yellow;}
<div class="wrapper">
<div class="p-wrapper">
<div class="box">
Float
</div>
<p> Many variations of Lorem Ipsum exist today, and sometimes the
text is altered to include humorous phrases.
If you’re going to be using Lorem Ipsum as filler text on your pages,
you need to make sure that the passage doesn’t contain potentially
embarrassing information.
Using our Lorem Ipsum generator, you can easily select a variation to
build your desired number of Lorem Ipsum paragraphs, sentences, or
words.In addition, our generator can insert HTML markup. </p>
</div>
<p class="cleared"> when a printer jumbled a gallery of type to
create a type specimen book, Lorem Ipsum has been the industry
standard for dummy text.
Today, a variety of software can create random text that resembles
Lorem Ipsum. For example, Apple’s Pages and Keynote software use
scrambled placeholder text. And Lorem Ipsum is featured on Google
Docs, WordPress, and Microsoft Office Word.
</p>
</div>
I can't set definitive height for these 2 columns.
I set classes for each div column, contact and about. The only way that column stretches is when I fill it with content or set it to a definitive pixel height but when I shrink the page they stack and contact row gets swallowed up by the bottom about row. example here
http://codepen.io/Chris-Brennan/pen/rOWYab?editors=110
This is what I'm trying to achieve.
<div class="container" id="contact_container">
<div class="row">
<div class="col-md-6 contact">
<p><a href="pdf/resumeChris.pdf" download>Download: Resume</a><p>
<p>emailpgh#gmail.com</p>
<img class="pull-right" src="https://d22r54gnmuhwmk.cloudfront.net/photos/8/tt/ub/WotTuBQzQzQoeZY-128x128-noPad.jpg" alt="chris">
</div> <!---contact container--->
<div class="col-md-6 about">
<p><span style="color:tomato">About Me</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <span style="color:tomato">Currently seeking Junior Design position.</span></p>
</div> <!---about container--->
</div> <!---end row--->
</div> <!------end container----->
body{
font-family:'Montserrat',sans-serif;
margin-top:50px;
}
#contact_container {
height:100%;
padding:0 50px;
border:1px solid red;
overflow:hidden;
}
.contact {
height:100%;
padding:30px;
background:tomato;
}
.contact p{
font-size:1.5em;
}
.contact a{
color:white;
}
.contact img{
position:absolute;
top:20px;
right:20px;
}
.about {
height:100%;
padding:30px;
background: #34495e;
color:white;
}
/* Iphone/Android (Small Devices) ----------- */
#media only screen and (min-width : 320px) and (max-width: 767px) {
/* Styles */
#contact_container {
padding:0 50px;
}
.contact {
height:100%;
padding:30px;
background:tomato;
font-weight:700;
}
.contact p{
text-align:center;
font-size:1.5em;
}
.contact a{
color:white;
}
.contact img{
}
.about {
height:100%;
padding:30px;
background: #34495e;
color:white;
}
the grid system of bootstrap can be nested.
look this example:
<div class="col-md-6 contact">
<div class="col-xs-12-md-8">
<p><a href="pdf/resumeChris.pdf" download>Download: Resume</a></p>
<p>emailpgh#gmail.com</p>
</div>
<div class="col-xs-12-md-4">
<img class="pull-right" src="https://d22r54gnmuhwmk.cloudfront.net/photos/8/tt/ub/WotTuBQzQzQoeZY-128x128-noPad.jpg" alt="chris">
</div>
</div>
.contact img{
position: relative;
}
.contact {
text-align:center;
height:100%;
padding:30px;
background:tomato;
font-weight:700;
}
.contact p{
font-size:1.5em;
}
just make these changes in your css file for mobile view. after that just give a margin to your image if it is not aligned according to your need.
As the title explains, I have a little problem displaying a <hr> line.
In IE 7, 8, 9, Google Chrome, Opera Safari, all the same, no problem just one doesn't support the CSS3 effects like shadows, etc.
What I'm trying 2 do is, separate some news article by adding that line, but in Firefox that line is out of the container, is like is having position: absolute; and padding: 500px;
Here is my html markup :
<div class="container">
<div class="main-content-container">
<div class="article-container">
<div class="article-header">
<p class="article-count">0</p><p class="article-categories">1,2, 3, 4, 5</p>
<h1 class="article-title"><a href='#'>Lorem Ipsum is simply dummy</a></h1>
<p class="article-auth-date">2013 Apr 06</p>
</div> <!-- end of article-header -->
<img alt="bla bla bla" src="http:/localhost/uploads/test.png" style="border: none;">
<div class="article-post">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div><!-- end of article-post-->
</div>
<hr class="fancy-hr">
</div><!-- end of article-container -->
</div><!-- end of main-content-container -->
<aside></aside><!-- end of aside -->
</div><!-- end of container -->
And this is the CSS :
.main-content-container {
float:left;
margin: 5px 0 0;
padding: 0;
width: 660px;
height: 800px;
background-color: white;
-moz-box-shadow:inset 0px 0px 20px 4px rgba(173, 173, 173, 0.5);
-webkit-box-shadow:inset 0px 0px 20px 4px rgba(173, 173, 173, 0.5);
box-shadow:inset 0px 0px 20px 4px rgba(173, 173, 173, 0.5);
border: 1px solid #818080;
.article-container {
float: left;
margin: 20px;
padding: 0;
width: 615px;
}
.article-header {
float: left;
margin: 0;
padding: 5px 0 0 ;
width: 100%;
height: 50px;
margin-bottom: 20px;
}
.article-post {
border-top:1px solid #D3D3D3;
text-align:justify;
padding:3px;
margin-top:3px;
margin-bottom:5px;
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #000;
}
hr.fancy-hr {
width: 100%;
border: 0;
height: 1px;
background: #c5c3c3;
-webkit-box-shadow: 2px 0px 20px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 0px 20px rgba(50, 50, 50, 0.75);
box-shadow: 2px 0px 20px rgba(50, 50, 50, 0.75);
}
And 2 screenshots from both Google Chrome & Firefox:
http://i1217.photobucket.com/albums/dd399/MarianStroiu/googlechrome.png Google Chrome
http://i1217.photobucket.com/albums/dd399/MarianStroiu/ff.png Firefox
hr has very little support and is not treated well in browsers. It is not used a lot in my experience. The code below is common practice for what you want, customize it how you feel -
div.line {
border-bottom:thin solid #fff;
}
<div class="container">
<div class="main-content-container">
<div class="article-container">
<div class="article-header">
<p class="article-count">0</p><p class="article-categories">1,2, 3, 4, 5</p>
<h1 class="article-title"><a href='#'>Lorem Ipsum is simply dummy</a></h1>
<p class="article-auth-date">2013 Apr 06</p>
</div> <!-- end of article-header -->
<img alt="bla bla bla" src="http:/localhost/uploads/test.png" style="border: none;">
<div class="article-post">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div><!-- end of article-post-->
</div>
<!--<hr class="fancy-hr">--> do not use
<div class="line"></div>
</div><!-- end of article-container -->
</div><!-- end of main-content-container -->
This is related to the foreground color, Kevin Lynch's fix did not work for me on a page with a light grey (#d1d1d1) body background.
Changing the HR colour to white does work and it now appears as etched.
hr {color: #ffffff;}
In practice the HR just needs to be any shade that is lighter than the background, so white will always work.
I'm sure this isn't ideal for you, but rather than having to worry about all that styling, why not just make it an IMAGE instead of HR? It would be much more easily maintained and could simply be included as a wide image and simplify all your CSS.
Otherwise, have you tried lowering the width of the HR? It sounds dumb, but I have encountered situations before where the width has made the HR element pop out of its div.