hi all wonder if you could help me out, been beating my head up against a wall on this for a few days now.
i'm creating a web site and have 2 columns. when i add text to them instead of it automatically formatting to the size set of the column the text over flows. i have done some research on this and cant see where i have gone wrong. all of the examples i have looked at has the same code as me and doesnt have this error.
heres the code i have
css sheet
#leftcol {
float: left;
height: auto;
width: 300px;
padding: 5px;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
color: #fefcfc;
background-color: #3f3f3f;
text-align: justify;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#rightcol {
float: right;
height: auto;
width: 500px;
padding-right: 35px;
margin-right: 0px;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
color: #fefcfc;
background-color: #3f3f3f;
text-align:justify;
}
html
<div id="leftcol">dfgdfgdfgfdfdsfsdfdsfdsfdsfsdfsfdsfdsfsdgfgfsadsdsdasdsadsssadsda</div>
<div id="rightcol" style= width "500" >
<div>
<p> sadhjashdjashdjashdakjs</p>
<p> sadsadkasjdfksajfksjfksdfjkdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffweweqweqwf</p>
</div>
</div>
any help would b appreciated
thanks
If I'm understanding you correctly, try this:
#rightcol {
word-wrap: break-word;
}
This will force long lines of text to break.
Note Czechnology's comment, you have some invalid code here <div id="rightcol" style= width "500" > should be <div id="rightcol" style="width:500px">, or not there at all preferably (use CSS).
Related
I created two tables using table,table-cell. But when I increase padding on first cell it also increasing padding on second cell also vice versa. What is the reason and how to solve it.
.desc-one{
width: 100%;
margin-bottom: 20px;
display: table;
}
.desc-one-one{
width: 350px;
background-color: #ffffff;
display: table-cell;
padding-right: 10px;
border-radius: 10px;
vertical-align: top;
box-shadow: 0px 2px 1px #888888;
}
.quick-heading{
font-size: 20px;
font-family: opensans-semibold;
color: #2199e8;
padding-left: 10px;
padding-top: 5px;
}
.row-two-one{
max-width: 1200px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0px 2px 1px #888888;
}
.desc-one-two{
display: table-cell;
padding-left: 20px;
}
.recent-heading{
color: #2199e8;
font-size: 20px;
font-family: opensans-semibold;
}
<div class="desc-one">
<div class="desc-one-one">
<h1 class="quick-heading">
Quick links
</h1>
</div>
<div class="desc-one-two">
<div class="row-two-one">
<h1 class="recent-heading open-semibold">
Low Stock Distributors
</h1>
</div>
</div>
</div>
In CSS code: If I increase padding-top / padding-bottom of my first table cell heading, the second cell elements also taking the padding mentioned in first cell (vice versa)
I have tried your code and found that only the first heading gets the padding top. Maybe you have another bit of code on your page somewhere that is adding this extra padding.
.desc-one {
width: 100%;
margin-bottom: 20px;
display: table;
}
.desc-one-one {
width: 350px;
background-color: #ffffff;
display: table-cell;
padding-right: 10px;
border-radius: 10px;
vertical-align: top;
box-shadow: 0px 2px 1px #888888;
}
.quick-heading {
font-size: 20px;
font-family: opensans-semibold;
color: #2199e8;
padding-left: 10px;
padding-top: 100px;
}
.row-two-one {
max-width: 1200px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0px 2px 1px #888888;
}
.desc-one-two {
display: table-cell;
padding-left: 20px;
}
.recent-heading {
color: #2199e8;
font-size: 20px;
font-family: opensans-semibold;
}
<div class="desc-one">
<div class="desc-one-one">
<h1 class="quick-heading">
Quick links
</h1>
</div>
<div class="desc-one-two">
<div class="row-two-one">
<h1 class="recent-heading open-semibold">
Low Stock Distributors
</h1>
</div>
</div>
</div>
Your code works just fine, as the other answers say..
However, in one comment you remark that it works the way you describe if you remove the vertical-align:top from the style of the first cell.
Then why did you have this property in there in the first place? It confuses the matter to people who want to answer.
The answer is, if you don't specify any vertical-align property, it defaults to 'baseline`. That means that both cells align their contents to one another, on the bottom of the first line of text in each of them. That's simply how table cells behave; they work together.
The solution, therefore, is to put vertical-align:top in, which causes the cells to align their contents to their tops.
I am currently trying to render various circles on a page. I am currently drawing the circles using modified CSS from the following web page:
https://css-tricks.com/examples/ShapesOfCSS/
The CSS for circles in the link above draws the circles, but I am running into a couple of problems:
I need the circles to be spaced apart from one another (maybe 3px?)
I need the circles to be in the same horizontal line
I can't seem to do 1 and 2 at the same time
I am using the following HTML and CSS:
.circle-blue {
width: 10px;
height: 10px;
background: deepskyblue;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.circle-gray {
width: 10px;
height: 10px;
background: gray;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cell {
display: table-cell;
font-size: 6px;
}
<div class="circle-blue cell"></div>
<div class="circle-gray cell"></div>
<div class="circle-blue cell"></div>
My circle divs in my HTML implement the circle and the cell classes.
The Plunker link below will lead you to my example:
http://plnkr.co/edit/SPHmKyOjF6GbTtjEFPrd?p=preview
NOTE: The circles are small, so you have to look at the very top left corner of the Plunker preview mode to find them.
The issue is that you are setting the div to display: table-cell;. margin does not apply to elements when their display property is set to table-cell. http://www.w3.org/TR/CSS2/box.html#margin-properties states that margin:
Applies to: all elements except elements with table display types other than table-caption, table and inline-table
One way to get the desired result would be to remove display: table-cell; and add float: left; and margin-right: 3px; to the circles instead.
.circle-blue {
width: 10px;
height: 10px;
background: deepskyblue;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.circle-gray {
width: 10px;
height: 10px;
background: gray;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cell {
/*display:table-cell; Remove this*/
font-size: 6px;
float: left; /*Add this*/
margin-right: 3px; /*Add this*/
}
<div class="circle-blue cell"></div>
<div class="circle-gray cell"></div>
<div class="circle-blue cell"></div>
Use this
.cell{
margin-left: 5px;
display: inline-block;
font-size: 6px;
}
Instead of
.cell{
display: table-cell;
font-size: 6px;
}
when using table don't put content in them like images etc like that put a new div inside the cell specifically for content then use padding on your cell's to give spacing like below.
this way you get to keep cell's fluidity when doing responsive deign and it wont push down like float or inline-block would which I'm assuming you are doing since your using table for display.
.circle-blue {
width: 10px;
height: 10px;
background: deepskyblue;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.circle-gray {
width: 10px;
height: 10px;
background: gray;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cell {
display: table-cell;
font-size: 6px;
padding: 10px;
}
<div class="cell">
<div class="circle-blue"></div>
</div>
<div class="cell">
<div class="circle-gray"></div>
</div>
<div class="cell">
<div class="circle-blue"></div>
</div>
add this to the class 'cell'.
display: inline-block;
margin: 0 3px;
vertical-align: top;
plunker
I think if you change display: table-cell to inline-block, you will get your expected result. of course you need margin too.
Hope this help !
Would this be a viable solution?
https://hdcs.cz/?q=node/26
The code:
<style>
.circle-blue {
width: 10px;
height: 10px;
background: deepskyblue;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.circle-gray {
width: 10px;
height: 10px;
background: gray;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cell {
display: table-cell;
font-size: 6px;
}
</style>
<table>
<tr>
<td style="padding: 5px"><div class="circle-blue cell"></div></td>
<td style="padding: 5px"><div class="circle-gray cell"></div></td>
<td style="padding: 5px"><div class="circle-blue cell"></div></td>
</tr>
</table>
Regards,
Tomas Tudja
I have a PHP script that runs a completion progress bar. I want to display the percentage next to the bar...this should be the easy part. But for some reason, I can't get the percentage to display NEXT to the bar instead of UNDER it.
https://jsfiddle.net/
HTML
<div id="progress_bar_container">
<div id="progress_bar_background">
<div id="progress" style="width: <?php echo $progress_bar_width; ?>px;">
</div>
</div>
<div style="text-align: left; display: inline-block;">
<?php echo $completed_lc_percentage . "%"; ?>
</div>
</div>
CSS
#progress_bar_container {
width: 220px;
height: 20px;
}
#progress_bar_background {
display: block;
background-color: #eaeaea;
width: 200px;
height: 20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
#progress {
display: block;
background: #a8c25d;
height: 20px;
width: 0px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
You need to make sure that the container is wide enough to hold the two children elements inside, or you can use white-space:nowrap.
Make both children elements to display:inline-block, see the demo follows.
#progress_bar_container {
width: 220px; /*or increase the value*/
height: 20px;
white-space: nowrap; /*added*/
}
#progress_bar_background {
/* display: block; */
display: inline-block; /*added*/
background-color: #eaeaea;
width: 200px;
height: 20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
#progress {
display: block;
background: #a8c25d;
height: 20px;
width: 0px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
<div id="progress_bar_container">
<div id="progress_bar_background">
<div id="progress"> </div>
</div>
<div style="text-align: left; display: inline-block;">n%</div>
</div>
You need to float the progress_bar_background left, and then widen the width of the progress_bar_container to allow the percentage div to sit next to it. Here's an example of this working:
https://jsfiddle.net/b69ep74e/
You might want to push the progress percentage div down a pixel or two to line it up, and the width of the progress div should be a percentage.
That's because the #progress_bar_background doesn't have display: inline-block and the #progress_bar_container has a fixed width. That fixed width doesn't let space to the text.
Remove the width of #progress_bar_container or increase it. Add display: inline-block to #progress_bar_background and it should work fine.
https://jsfiddle.net/2qn9eecr/
It is because you're #progress_bar_container's allowance space is very little the percentage can't fit in the space NEXT to the bar and you also have to add a float:left; in your #progress_bar_background css.
#progress_bar_container {
width: 300px;
height: 20px;
}
#progress_bar_background {
display: block;
float:left;
background-color: #eaeaea;
width: 200px;
height: 20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
#progress {
display: block;
background: #a8c25d;
height: 20px;
width: 0px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
<div id="progress_bar_container">
<div id="progress_bar_background">
<div id="progress" style="width: 100px;">
</div>
</div>
<div style="text-align: left; display: inline-block;">
50%
</div>
</div>
I am trying to create a fluid responsive layout.
In the aside I have 8 blocks as shown below:
<aside id="sub-content">
<div class="sub-box">
<article class="sub-art">
<h2>Mid Sidebar</h2>
<p>
text...
</p>
</article>
</div>
</aside>
...and so on
The class "sub-art" has been formatted as following:
#sub-content .sub-art{
background:#ffffff;
margin: 0px;
padding: 10px 15px;
margin-left: 10px;
margin-bottom: 10px;
overflow:hidden;
border: 1px solid #ccc;
border-top-left-radius: 8px;
border-bottom-right-radius: 8px;
}
As you can see in the example the first article class="sub-art" should be align to the div called Second post.
How can I correct the margin-right in order to obtain 8 blocks well alligned?
This is one way to do it:
#sub-content {
width: auto;
float: left;
margin-top: 10px;
margin-left: -10px;
margin-right: -10px;
}
#sub-content .sub-box {
width: 25%;
box-sizing: border-box;
float: left;
padding-left: 10px;
padding-right: 10px;
}
#sub-content .sub-art {
background: #ffffff;
margin: 0px;
padding: 10px 15px;
margin-bottom: 10px;
overflow: hidden;
border: 1px solid #ccc;
border-top-left-radius: 8px;
border-bottom-right-radius: 8px;
}
I'm applying a negative margin to the #sub-content element and using padding rather than margins to create the gutters in the .sub-box elements. I also removed the margins from the .sub-art elements. Also, notice that I set box sizing on the .sub-box elements to border-box. This is necessary to prevent the padding from increasing the size of the box.
http://jsfiddle.net/80z6vp46/6/
This method is basically the same thing Bootstrap 3 does.
May be not the smartest solution, but just add
#sub-content .left-most-element {
margin-left: 0px;
}
to your .css file and the new class to your "left most elements" (1 and 5)
<article class="sub-art left-most-element">
This should do the trick ;)
when I zoom out on Google Chrome, my right div goes on the next line, I'm trying to figure out what it is that I'm doing wrong. Could it be a display inline block? I'm confused here, but look:
I don't have anything in latest new id
#latestnews {
}
My Left & Right columns
.left {
width: 70px;
float: left;
margin: 3px;
height: 60px;
padding-bottom: 5px;
border: 1px solid #C2C2C2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #E9E9E9;
}
.right{
float: left;
padding-left: 5px;
margin-left: 10px;
margin: 3px;
width: 491px;
height: 60px;
border: thin solid #CCC;
background: #E9E9E9;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding-bottom: 5px;
}
What it shows:
<div class="left" style="clear:both;">
<div class="date">
<span class="day">17</span>
<span class="month">Feb</span>
<span class="year">2014</span>
</div>
</div><!-- End Left Column -->
<div class="right">right</div>
When I zoom out, it shows this:
but on normal view, it shows this:
is it possible that I didn't include anything in my container for #latestnews ? Thanks for all help!
My guess is that the float: left style on the div you are trying to put on the right, is why you are having that problem.
Why don't you try getting rid of both float: left styles, and replace them with display: inline-block.
Then your only problem should be zooming in.