I think I searched thoroughly this site, but could not find answer to my issue; I also think it's pretty simple, but after several hours of puzzling with this, I have given up and decided to look for help...
Here is my issue; I have a DIV, and two DIVs within it; first DIV, "snapshot" contains script that returns website snapshpt, using websnapr.com; snapshot size is 202 x 150, so I defined width of that DIV to 230 px. Second DIV, "description", is supposed to be displayed on the right side of that snapshot, and it contains some text. My issue is that text at the end flows around "snapshot", i.e., beneath it, and I want it to stay in line, always on the right side of DIV "snapshot", not below him.
So, you see lines 1 through 10 are fine; I want lines 11 and 12, and rest of the text, to be aligned below lines 1-10, not below snapshot!
Here is the code:
<div class="entry">
<h2 align="center">Some title here...</h2>
<div id="snapshot"><script type="text/javascript">wsr_snapshot('some link here', 'some pass here', 's');</script></div>
<div id="description"><p>Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7<br>Line 8<br>Line 9<br>Line 10<br>Line 11<br>Line 12<br></p>
<p align="left">Link:<br>
some link here</p></div>
</div>
and here is CSS for these IDs and classes:
.entry {margin:0 0 20px 0; border:2px solid #fff; background:#e6e6e6 url(images/bg.png) repeat-x; color:#333; padding:10px 10px 0 10px; min-height:200px; height:auto !important; height:200px; }
#snapshot {float:left; width:230px;}
#description {display: block; margin-left:240 px;}
I've tried with various properties for these two DIVs - display, clear, overflow, etc., to no avail; hope someone can shed light on what I'm missing here...
Aha: you’ve got an extra space between 240 and px in your margin-left rule for #description.
The following works:
#description {display: block; margin-left:240px;}
Related
I can't seem to float my image to the left? Can't figure out why?
I've applied a class of align-left which contains float: left.
Live version at - https://www.workbooks.com/salesforce-alternative (see the review grid half way down below the heading 'High customer satisfaction ratings').
Code:
<section class="bluesection card__content__headings">
<img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" height="395" src="/sites/default/files/2017-03/Reviews-6.png" width="400" />
<h2 style="height: 400px;"></h2>
<p></p>
</section>
CSS:
.align-left {
float: left;
}
.bluesection {
background-color:#ecf0f2;
padding: 50px 100px 50px 100px;
}
Try this code:
<section class="bluesection card__content__headings">
<h2 class="heading--two inline-block__heading" style="margin: 0px 0px 20px; text-align:center;">High customer satisfaction ratings</h2>
<img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" src="/sites/default/files/2017-03/Reviews-6.png" width="400" height="395">
<p class="inline-block__copy">With our world class software, our CRM expertise and proven implementation best practices, we are a genuine partner you can rely on to accompany you on your CRM journey - helping you transform your business and drive ongoing success.</p>
<p class="inline-block__copy">But don't just take our word for it. Over 268 independent customers have reviewed Workbooks on G2 Crowd where Workbooks consistently scores above Salesforce in satisfaction and richness of functionality.</p>
<p class="inline-block__copy">The G2 Crowd Report compare Workbooks to its competitors based on independent user reviews. Workbooks is rated higher than Salesforce in most categories.</p>
<p style="clear:both;"></p>
</section>
As you can see, I change the img after h2, and I have added a p with clear:both style to the end inside of the section. Also I have added and removed some CSS styles to get a nice look.
It's not float-left but float: left;. That's not the only issue though.
The image is already floating left but the reason it doesn't work the way you want it to work is because of the padding of the blue section.
Keep in mind that the image is floating to the left relative to the element it is enclosed in. If you change the value of padding to padding: 20px 50px 20px 50px; you can see that the image will move further to the left because the padding got smaller than it was initially.
I figured it out.
The image was floated to the left, the reason why the text wasn't wrapping was due to an inline height: 400px being applied to the heading rather than the section.
Sam
it already floated left, the reason it cant go any further is because it reached the edge of the div. padding shrinks the edges relative to the child elements, but maintains it defined size unless values are bigger.
here is a recommended fix:
HTML
<section class="bluesection card__content__headings">
<img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" height="395" src="/sites/default/files/2017-03/Reviews-6.png" width="400" />
<div class="text">
<h2></h2>
<p></p>
</div>
</section>
CSS
.bluesection {
position: relative;
width: 100%;
display: flex;
}
.text {
width: 100%;
}
example in jsfiddle: https://jsfiddle.net/qf6w18p1/
I figured it out.
The image was floated to the left, the reason why the text wasn't wrapping was due to an inline height: 400px being applied to the heading rather than the section.
You can fix the height, but when you see your code in a phone device (360px x 640px), the section title h2 will be located under img, and it will not look nice.
My advice is to change the orden of the h2 and img tags.
On the website that I'm building, some pages the text extends all the way to the edges. I've compared the HTML for ages, and don't see what I'm doing wrong. Maybe it's in the CSS? Does anyone see what's going on? I tried refreshing my browser and clearing my cache.
Why does p extend to to the edge on only some of my pages? When the HTML looks the same?
<div id="wrapper3">
<div id="portfolio" class="container">
<div class="title">
<h2></h2>
<span class="byline"><!--Integer sit amet pede vel arcu aliquet pretium--></span>
<br>
<p></p>
<p></p>
</div>
</div>
Since you only have a little text, it would look much better with a narrow paragraph, like this :
p {
line-height: 180%;
margin-left: auto;
margin-right: auto;
text-align: justify;
width: 600px;
}
You will always have the same width, centered, and the text will be displayed "as in a book"
Try adding some left and right padding like this:
What I used is:
padding: 8em 2em;
Which means, 8em top and bottom padding as well as 2em left and right padding
Since you're using center-aligned text, the visual width is going to vary because some lines are a bit longer or shorter than others depending on the words used in them. If you set p { background: red; } you'll see that the paragraphs do extend to the edges, but the text isn't filling all the available space.
A good workaround is to use padding on the <p> to force space on the edges, but even that won't be foolproof. You can force lines to take up all available space by using text-align: justify;, but shorter lines will align left instead of center.
This is just because the text is centered. Some lines of text break in different places than others, and so the length of a line will differ. Apart from this centered text, I don't see any difference.
Try to resize your browser slowly, and you'll see the margin increasing (or decreasing) until one word jumps to the other line, and the margins are gone.
You could try:
text-align: justify;
text-align-last: center;
This will add slightly smaller or large spaces between words to make the text fill the entire line. The last (shorter) line will be centered, (but not on Safari).
There are other questions about this subject. You may have a look for yourself:
How to Center-Justify text in CSS?
I am working on a site and for some reason, my Divs are acting very strangely.
link
Im not sure why this is happening.
HTML
<div class="row" id="information">
<div id="informationContent" class="large-12 columns noSlideshow">
<div id="pressReleaseCenter">
<h2>Press Release</h2>
<div class="pressImages"><img src="images/voip_vid_logo.png" height="200" width="200"></div>
<div class="pressText" id="press1">December 04, 2013<br />VoIP Innovations is now accepting requests for the new Toll-Free area code<br />Due to the popular demand of Toll-Free numbers, the FCC<br />will introduce 844 as the newest area code on Saturday, December 7.<br />Starting on Saturday, December 7, everyone will have the opportunity to select 844 as more</div>
<br />
<div class="hrBreak"></div>
</div>
</div>
</div><!--End Row-->
CSS
/*Float press release images*/
#pressReleaseCenter{
width:960px;
margin: 0 auto;
/* background-color:green;*/
height:initial;
}
.pressImages{
/* background-color:yellow;*/
height:auto;
width:30%;
float:left;
height:91px;
}
.pressText{
/* background-color:orange;*/
text-align:left;
width:70%;
float:left;
height:91px;
bottom:0;
}
.hrBreak{
width:100%;
height:3px;
background-color:white;
position:relative;
}
#press1{
padding-top:10px;
}
Also, is there a better way to do this? Im considering using a table. Would that work in this situation? I want to continue with more information in the same format.
Don't use a table for layout. That is very much not the done thing any more. You haven't actually specified how it's supposed to look but it looks like you need to add clear: both; to .hrBreak in order to get the line to sit below your content as I imagine it should be doing.
See here as to why
SIMPLE SOLUTION:
This is a common problem when using float property for divisions. I had the same problem once.
Do the following code addition in both the HTML file and CSS file:
HTML:
<div class="row" id="information">
<div id="informationContent" class="large-12 columns noSlideshow">
<div id="pressReleaseCenter">
<h2>Press Release</h2>
<div class="pressImages"><img src="images/voip_vid_logo.png" height="200" width="200"></div>
<div class="pressText" id="press1">December 04, 2013<br />VoIP Innovations is now accepting requests for the new Toll-Free area code<br />Due to the popular demand of Toll-Free numbers, the FCC<br />will introduce 844 as the newest area code on Saturday, December 7.<br />Starting on Saturday, December 7, everyone will have the opportunity to select 844 as more</div>
<br />
<!-- ADD THE BELOW LINE -->
<div class = "clear"></div>
<div class="hrBreak"></div>
</div>
</div>
</div><!--End Row-->
Add the following code to CSS:
.clear{
clear: both;
}
Here is why that happens:
Link-1
Link-2
Hope it helps you.
Consider wrapping each press release in an element so that you can style the group of elements that make up a press release. You could wrap them in additional div tags, or ul li. You can then get rid of the extra <br> tags and the <div class="hrBreak"></div> entirely.
http://jsfiddle.net/h7GpT/ is an example that uses an unordered list.
I'm assuming that your main problem is with the hrBreak div overlapping with the first two DIVs.
Short version: Adding clear: left; to .hrBreak should give you a quick fix. This makes that DIV appear beneath any left-floated elements before it. clear: both; would also work, though some older browsers sometimes struggle with that particular option (so use clear: left; if that's all you need).
Long(er) version: When you use float, your element ceases to be a part of the regular document order - and unfloated elements that share the same space (in this case, anything within div#pressReleaseCenter) will operate separately.
If you have some content that follows after a floated element (or elements), you can most easily use the clear: left; or clear: right; CSS to ensure a clean divide between the content (or clear: both;, as mentioned before, with the caveat that a minority of browsers may struggle).
You shouldn't require the <br /> tag at all. In your example above. Use the clear on your hrBreak DIV and affect any desired spacing with margin or padding (for example, div.hrBreak { margin-top: 2em; } or whatever.
One thing to be aware of - if you have an unfloated DIV (or any other element) that contains floated elements, you may want to use overflow: auto; if you require that container to exhibit any styling of its own. For example, if you wanted div#pressReleaseCenter to have a border or background colour, using overflow: auto; will force it to acknowldege the proportions of its floated content. If you don't do this, you may find that your DIV only appears as large as its unfloated content (unless you've manually defined a width and height).
I have been trying to align the "Low" text and arrow that I showed on image. Basically want I is to align the text and the arrow (Low) some pixels below the blue chart. i.e. chart 3.
I'm generating those blue bars from my database and creating a table. Here is the code:
.lower {
display: block;
font-size:7pt;
color:#666666;
position:relative;
bottom: 5px;
left:-25px;
}
<td valign="bottom" style="width:8px;height:20px;"
<div style="padding: 0px;width:8px;height:" . round($var/2.5) . "px;background-position:bottom;background-repeat:no-repeat; display: block;">
<div class="lower" >Low <img src="icon-sort-up.png" />
</div>
</div>
</td>
The round($var/2.5) that one calculates my high to align my "High" text and arrow but somehow is affecting my Low text.
a busy cat http://sandbox.visistat.com/partner-reports/live3/pulse.png
You are nesting your "lower" div into your "high" div, that is why the round($var/2.5) is also affecting your "lower" div. Since the round($var/2.5) is written inline instead of in a seperate CSS file it will disregard anything that was in your css file and take the inline style instead.
To prevent this you can either place the "lower" div below the first div instead of nesting inside it.
Also you are not closing your opening td tag in your code example, although that might be a typo.
I have a html page which looks like the following:
I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <img> tag for it if it would help. One lame way is to use <p> tags with padding, but that is not an efficient way, so kindly suggest some good methods.
EDIT: HTML:
<div id="leftStage" class="rounded-corners">
<div id="questionDisp" align="center">
</div>
</div>
CSS:
#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}
JS: (When the appropriate function is called: )
$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1); //data read from xml
EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed
There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.
EDIT:
The concept here is to float <div>'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated <div>'s, you can create a wide variety of cascading "stencils."
See concept illustrated here: fiddle
If it is background-image then use the position:absolute with proper margins (top and left), and set the width less than that the oval background-image. Then display property 'block'.
Maybe you could try the jQuery plugin Text Fill
also see: https://stackoverflow.com/a/688362/753676
I removed my answer since only the left float worked.
If you paste this code: it'll show you exactly how it works. I did a border-radius instead of creating a circle png.
<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
You have not shared any HTML, The working code is with some assumption
The HTML is,
<div id="main">
<div class="text">This is text</div>
</div>
Where div with classtext is the text container.
The CSS for same will be,
#main{
background-image:url('http://i.stack.imgur.com/bw2HK.png');
height:563px;
width:691px;
}
#main .text{
color:#FF0000;
width:240px;
text-align:center;
top:100px;
border:1px solid;
float:left;
position:absolute;
}
Here .text is the class that represent the text styling. The main part is position:absolute;. This will set the text div position to absolute. Now you can move the div above image div using top and left styles.
Please do review working example here
P.S. The border, color and other styles can be changed as per your need.