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.
Related
I would like to make div objects side by side, and some ontop of one another.
here is my current code:
.active_deal{
font-size: 18px;
border: 2px solid;
/*padding: 5px;*/
/*padding-top: 5px;*/
/*padding-bottom: 5px;*/
border-radius: 4px;
}
.Deal_div_area{
border-right: 3px dashed;
max-width: 20%;
max-height: 80%;
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
position:relative;
}
}
<div class="active_deal">
<div class="Deal_div_area">
<img src="https://i1.wp.com/theverybesttop10.com/wp-content/uploads/2015/05/Top-10-Crazy-and-Unusual-Square-Foods-10-510x498.jpg?resize=100%2C586">
</div>
</div>
as you can see, the left section has an image, and I would like to make the right section have 2 text fields all ontop of one another for information on the image. I have tried putting div classes right next to it on my HTML file, however, this just places the text underneath my image rather than to the right of it. Any thoughts?
Try using this simple code:
<div class="active_deal">
<div class="Deal_div_area">
<img src="https://i1.wp.com/theverybesttop10.com/wp-content/uploads/2015/05/Top-10-Crazy-and-Unusual-Square-Foods-10-510x498.jpg?resize=100%2C586">
</div>
<div class="text-area">
<h2> Title here</h2>
<p> Some text here </p>
</div>
</div>
This is the css:
.active_deal{
font-size: 18px;
border: 2px solid;
/*padding: 5px;*/
/*padding-top: 5px;*/
/*padding-bottom: 5px;*/
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-evenly;
// justify-content: space-between;
}
.Deal_div_area{
border-right: 3px dashed;
max-width: 20%;
max-height: 80%;
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
position:relative;
}
.text-area{
// your code for the text here
}
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>
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).
I am using CSS rounded corners for firefox and I have the following problem with content boundaries:
Code
<html>
<head>
<style>
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
}
#inner {
background: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="outter">
<div id="inner">text</div>
</div>
</body>
</html>
Effect
alt text http://img256.imageshack.us/img256/2108/testew.png
I can avoid this problem by defining -moz-border-radius for each outter's child. There is any other way I am missing?
Edit
A harder test with multiple inner divs with different background-color for each one:
<div id="outter">
<div id="inner1" style="background: blue">text</div>
<div id="inner2" style="background: gray">text</div>
...
<div id="innerN" style="background: yellow">text</div>
</div>
You can also do this:
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
background: red;
}
#inner {
opacity: 0.5;
}
Moving the background to the rounded parent will render correctly, see here for an example: http://jsfiddle.net/mE8En/ (only works in firefox!) add the webkit border radius if you want to support other webkit based browsers as well, like this:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
Update for edit: To handle the inner divs in firefox subtract a pixel on the inner div to compensate for the border, resulting in this:
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: red;
}
#outter > div:first-child {
-moz-border-radius-topleft: 14px;
-moz-border-radius-topright: 14px;
-webkit-border-top-left-radius: 14px;
-webkit-border-top-right-radius: 14px;
}
#outter > div:last-child {
-moz-border-radius-bottomleft: 14px;
-moz-border-radius-bottomright: 14px;
-webkit-border-bottom-left-radius: 14px;
-webkit-border-bottom-right-radius: 14px;
}
#inner {
opacity: 0.5;
}
Note: the radii aren't perfect on the inner divs in webkit, adjust as desired...this is because the rendering isn't pixel perfect between browsers.
Also, if you want these rounded corners in IE without images, check out DDRoundies.