I am having a small issue with positioning of a div within my project.
+------------------------+
|+-------+ ~~~~ TITLE| <--how can I stop the text wrapping up the
|| | ~~~~~~~~~~~~~ |\ left hand side here?
|| | ~~~~~~~~~~~~~ | \
|| | ~~~~~~~~~~~~~ | \
|| | ~~~~~~~~~~~~~ | \
|+-------+ ^ | Title Div (class="widgetHeader" in example)
+---------------------|--+
^ |
| \
Thermometer div \
(all good) \
"widgetContent" in example fiddle
However, I wish to force the div's title to stop the content from wrapping around it.
Something like:
+------------------------+
|+-------+ TITLE|
|| | ~~~~~~~~~~~~~ |
|| | ~~~~~~~~~~~~~ |
|| | ~~~~~~~~~~~~~ |
|| | ~~~~~~~~~~~~~ |
|+-------+ ~~~~~ |
+------------------------+
I what I wish to force on each widget.
This is the fiddle.
The two main classes are:
.widgetHeader {
padding-top:5%;
float:right;
margin-right:4px;
font-weight:bold;
text-decoration:underline;
}
.widgetContent {
float:left;
text-align:left;
padding-top:20%;
}
Which is at the end of the CSS in the example.
I know I can solve this easily enough using the <br /> tags within the HTML, but I'm sure it should be easily possible to implement this here.
I think the main problem here is that the Title is right aligned and the content is left aligned.
Any CSS solution (since it will be designed for varying sized screens, I prefer to use %'s instead of px's)?
Fixing the code
Don't float it, instead you can right align it with text-align, like so:
.widgetHeader {
padding-top:5%;
margin-right:4px;
font-weight:bold;
text-align:right;
text-decoration:underline;
}
Here is the updated fiddle
An alternate approach
If I was doing this myself from scratch I would likely do something like this:
.main {
display:block;
width:300px;
border:1px solid #999;
background-color:#EEE;
padding:5px;
}
.image {
float:left;
display:block;
width:120px;
height:120px;
border:1px solid #999;
background-color:#FFF;
}
.content {
display:block;
margin-left:130px;
color:#444;
}
.title {
text-align:right;
font-weight:bold;
}
.clear{
clear:both;
}
<div class="main">
<div class="image"></div>
<div class="content">
<div class="title">Title Here</div>
<p>The rest of the content goes here and will look beautiful and majestic.</p>
<div class="clear"></div>
</div>
</div>
Here is a working example
For class ".widgetHeader" remove property "float: right" and add "text-align: right;". This will solves your problem.
Instead of using float use text-align: right and display: block(to prevent the title to wrap under the thermometer div)
.widgetHeader {
display: block;
text-align: right;
padding-top:5%;
margin-right:4px;
font-weight:bold;
text-decoration:underline;
}
Fiddle here
OR
You can still use float and put a max-width of your title div.
.widgetHeader {
max-width: 150px;
float: right;
padding-top:5%;
margin-right:4px;
font-weight:bold;
text-decoration:underline;
}
Fiddle here
You only have to change one thing (2 if u want to make it a little better looking):
.widgetHeader {
text-align:right; <--- add this
margin-right:4px;
font-weight:bold;
text-decoration:underline;
}
Delete the padding-top.
Fiddle here
Related
In my footer I want to make 3 different sections of paragraphs-at left, middle and right. The 3 paragraphs should sit next to each other, not below each other.
This is how I was trying to do, but I failed to figure it out.
<footer>
<div id="footer_box">
<p id="footer_text_left">
should sit at the left.
</p>
<p id="footer_text_middle">
should sit in the middle.
</p>
<p id="footer_text_right">
should sit at the right.
</p>
</div>
</footer>
.CSS:
#footer_box{
border-top:2px solid #009933;
padding-bottom:75px;
background-color:#3366CC;
}
#footer_text_left{
font-size:15px;
color:black;
font-family:Euphemia;
}
#footer_text_middle{
font-size:15px;
color:black;
font-family:Euphemia;
}
#footer_text_right{
font-size:15px;
font-family:Euphemia;
color:black;
}
First option:
p {
float: left;
}
Second option:
p {
float: left;
width: 30%;
margin: 0 1%;
}
Third option (best):
p {
display: inline-block;
}
Another thing I saw was that every paragraph had the same rules, you could set the font properties on the body or global paragraph so you won't need to set it on everything.
That would look like this:
body {
font-size:15px;
font-family:Euphemia;
color:black;
}
Or if you want it just on the footer paragraphs:
footer p {
font-size:15px;
font-family:Euphemia;
color:black;
}
This is Extremely easy to do, either by making the <p>'s inline-block, or float:left them:
#footer_box p{
display:inline-block;
}
inline-block, (or inline) is the best way to do it, as float:left, has some unwanted effects, such as the <p>'s no longer effect the height of their parent, as can be seen in this JSFiddle, compare it with the one below.
JSFiddle
See this SO question about it: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
Just capture the paragraph into a div and add style. For example
<div style="float: left; margin-right: 20px">
Here's how I did for a paragraph containing picture: https://jsfiddle.net/xomkq7dv/7/
I would like to create two divs, one inside the other with equal padding on all sides of the child. Like so
<div>
<div>Foo</div>
</div>
So that the result looks like
----------------------------
| |
| |--------------------| |
| | | | <---- There is 1em padding on the inner
| | Foo | | container too
| | | |
| | | |
| |--------------------| |
| | <---- This is the window height,
---------------------------- the padding is 1em on all sides;
How do I do this in CSS?
Right now I am stuck on this layout, missing the bottom padding
With this code
<div class="more-padded full-height blue-green fixed">
<div class="more-padded full-height light-tan more-rounded light-border">Foo</div>
</div>
and style
.more-padded {
padding: 1em;
}
.full-height {
height: 100%;
}
.blue-green {
background-color: rgba(153, 204, 204, 1);
}
.light-tan {
background-color: rgba(239, 235, 214, 1);
}
.more-rounded {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
You can use box-sizing:border-box; so that the width and height properties include the padding and border
HTML
<div id="parent">
<div id="child">Foo</div>
</div>
CSS
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#parent {
box-sizing:border-box;
height:100%;
padding:1em;
background:hotpink;
}
#child {
height:100%;
background:dodgerblue;
}
Demo
Hi for equal padding use the following code.
Live demo is on http://jsfiddle.net/adarshkr/fqm83gms/5/
html
<div class="outer">
<div class="inner">
<p>Equal padding adarsh</p>
</div>
</div>
css
body{
background:#ddd
}
.outer{
background:#eee;
padding:20px
}
.inner{
background:#000;
padding:20px;
color:#fff
}
.inner a{
color:#fff;
text-decoration:none
}
Ok, now that I am on an actual computer:
I think you want this: (Js Fiddle For Reference)
body,html{
height:100%;width:100%;
}
body{
padding:1em;
}
body >div{
border:1px solid black;
}
i have very simple scenario but i am really stuck with it and need your help please .
this is what i have to do .
This is a div with righ and bottom border and and image in its top . I have to display text same as this one . For this i am using bootstrap like this
<div class="span4" >
<h1 class="BoldText">
GET A QUOTE
</h1>
<span class="SimpleText">
INSERT TEXT HEREINSERT TEXT HEREIN-SERT TEXT HEREINSERT TEXT HEREINSER
</span>
</div>
now problem is that i have to show it in middle of box , if i set margin-left to h1 and <span> tag this is how it looks like this padding also does not work here . will someone guide me how do i adjust it . it seems simple but i am really unable to get it .
I would set widths:
http://jsfiddle.net/4YUtW/
.span4 {
width:300px;
border:1px solid #666;
}
h1 {
width:226px;
display:block;
margin:0 auto;
}
.SimpleText {
width:226px;
display:block;
text-align:justify;
margin:0 auto;
}
but, there are probably better solutions... Of course, you will have to change values to fit your needs.
You will need to set up your CSS as such:
#img {
background:transparent url('http://thebuzzdoha.com/wp-content/uploads/2014/06/fifa-world-cup-wallpaper-hd.jpg') top center no-repeat;
height:200px;
width:100%;
margin:0 0 20px 0;
}
.span4 {
border:1px dotted Black;
margin:0 auto;
width:400px;
text-align:center;
}
.span4 a {
color:Black;
text-decoration: none;
font-family: sans-serif;
}
.SimpleText {
display:inline-block;
margin:0 auto;
width:70%;
text-align:justify;
}
You can see this here->http://jsfiddle.net/5KjXq/
Hope this helps!!!
So, if you're not particularly attached to using bootstrap, doing this in pure html and css is relatively simple and usually a whole lot easier to read than the bootstrap spit-out code. I have made a fiddle with an example: http://jsfiddle.net/6aJJ5/1/. Hope that helps!
As the title says, how should I vertically align this:-
Need: - - | - | - -
Currently the vertical alignment is by default at baseline.
Currently: _ _ | _ | _ _
HTML:
<div class="moduleResult">
<p>You have
<span class="moduleCard">88</span>
out of
<span class="moduleCard">88</span>
correct</p>
</div>
CSS:
.moduleResult{
width:100%;
}
p{
font-family:'Arial';
font-size:20px !important;
line-height:30px;
text-align:center;
}
.moduleCard{
font-size:60px !important;
line-height:60px;
padding:0 4px;
}
and the text has to be aligned centred inside a < div class"moduleResult" >
here's the Fiddle Link
See http://jsfiddle.net/kfVGf/2/
.moduleCard{
font-size:60px !important;
padding:0 4px;
display: inline-block;
vertical-align: middle;
}
Result:
Note: unless you have a valid reason for it, avoid to use !important
My floats are acting strange (well I guess they're acting how they're supposed to), but I can't seem to understand why. For some reason the div box that contains 'Alex' always goes down to another line. Is there something I'm messing up?
style.css
.clear {
clear:both;
}
.page-header {
width:100%;
background:#efefef;
border-bottom:1px #ddd solid;
padding:3px 10px;
margin-bottom:24px;
}
.page-header-title {
width:200px;
float:none;
}
.page-header-search {
float:left;
width:100px;
}
.page-header-top_menu {
float:right;
width:200px;
}
index.html
<div class="page-header">
<div class="page-header-search">
blah
</div>
<div class="page-header-title">
Calender
</div>
<div class="page-header-top_menu">
Alex
</div>
<div class="clear"></div>
</div>
Thank you very much.
If you exchange the
float: none;
for the "calender"-div with
float: left;
the "Alex" behaves better.
You didn't specify how it should look like.
http://jsfiddle.net/wDp3p/ << I visualized your div-structure with red borders.
http://jsfiddle.net/wDp3p/1/ << version with float: left;
"float" is not really for solutions like table columns but for floating - so the "calender"-div floats directly after its left hand previous element.
You're floating it wrongly. You should assign a float property to .page-header-title.