http://jsfiddle.net/V2mGG/
<div class="header-wrap">
<h2> title </h2>
<p class="company-desc">description float right</p>
</div>
I want something like this
Bachelor Degree in Product Design
at Harvard
but the title can be long and short, it's dynamic, how to design the layout so that it won't break?
Change the float:right; to text-align:right; right.
Because with float, your <p> content won't stay inside of the head-wrap anymore. I just added in this demo a border to the header-wrap to show you which content will stay inside of the tag with your code.
And here is the demo which I use the text-align:right value and also added a border to the wrapper to show you, the p-tag will stay inside of the wrapper:
Codepen Demo
With this solution, your title will have the left-alignment, and the description will stay on the right. If you want both with the alignment right, just copy the text-align:right to the CSS-statement of the wrapper.
Please also read this awesome article all about CSS-float by CSS-Tricks to understand how it really works.
Like this
demo
css
.header-wrap{
margin:0 auto;
width:200px;
text-align:right;
}
h2.header-wrap{
margin:0;
padding:0;
}
.header-wrap p{
text-align:right;
float:right;
margin:0;
padding:0;
}
Just with this
.header-wrap{
margin:0 auto;
width:200px;
text-align:right;
}
Demo Fiddle
Try this:
.header-wrap{
width:auto;
display:inline-block;
}
Related
I divided my page in sections, one of the sections contains a h2-Tag (the title of the section) and a div (that contains a p-Tag).
I want the text to be perfectly centered inside the section, because of that, I've used flex to center the element.
Now I need the title to be aligned on the left side (see image for better explanation).
https://ibb.co/b5DSpT
If I add it to the div affected by the flex-property the styling is completely wrong. If I remove it from the div, the text isn't perfectly centered anymore, because the h2-tag occupies a small amount of the section.
Any ideas how to solve this problem?
Thanks,
Mike
You don't need to use flex. Check the code below.
.wrapper{
padding:25px;
background:#d0e1d9;
}
.title{
color:#000;
font-size:20px;
margin:0 0 25px 0;
}
.section{
padding:50px 25px;
text-align:center;
font-weight:bold;
font-size:20px;
background:#e5e5e5;
}
<div class="wrapper">
<div class="title">Uber uns</div>
<div class="section">This is the Div with the Text</div>
</div>
I'm having trouble getting margins to work on an image. I have an image, and it has the following CSS:
#logoRedrum{
position:relative;
width:50px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
The HTML for the image is as follows:
<img id="logoRedrum" src="resources/img/logoRedrum.png">
What I'm trying to do with this is to have my image centered at all times. Instead of having it centered, it is doing this:
The red backwards "R" with the blue outline is my image. I have googled several times what might be causing the image to stay on the left, but to no avail.
All help greatly appreciated!
Add display:block; to img
#logoRedrum{
position:relative;
width:50px;
display:block;
margin:0 auto
}
DEMO
If you need to center the image in the main parent its easy, do it like this
//HTML
<div class="centered-content"> <img class="no-margin" src=""/> </div>
//CSS
.contered-content {
text-align:center;
}
.no-margin{
margin:0 auto;
}
Im trying to align my elements at center but I´m having some problems in this process. I aligned the "Title" at center and it works, and now I´m doing the same process to other elements but its not working.
Anyone there can see what is wrong? Thank you!
My jsfiddle with the problem:
http://jsfiddle.net/mibb/6SLa5/
My Html:
<section id="loop-news-container">
<article id="loop-news">
<h1>Title</h1>
<span>Date of Post</span>
<img src="image1.jpg" />
<p>Post of 1 <a class="buttonl" href="#show" id="verfancy">read more</a></p></p>
</article>
My css:
#loop-news-container{width:100%; height:auto; float:left;}
#loop-news{width:280px; height:250px; background:#fff; margin:5px auto 5px auto;}
#loop-news h1 {font-family:'bariol_boldbold'; text-align:center; font-family:'bariol_boldbold';margin:0 auto 0 auto; background:#F00;position:relative; text-decoration:none;}
#loop-news h1 a{text-decoration:none; font-size:20px; color:#002e5e; font-weight:100; }
#loop-news span{font-family:'bariolthin';font-size:14px; font-weight:normal;color:#888;margin:0 auto 0 auto; text-align:center; background-color:#FF0; }
The text of the <h1> can be centered with text-align:center because it takes the whole width of its container (it's a block-level element). The <span>, not so much, as it only takes the width of its content (it's an inline element) - your coloured background make this quite visible. In fact, basically every child element you have there (other than the <h1>) is an inline or inline-block element, so applying text-align:center to them directly won't work.
If you wanted to center all the elements in #loop-news, just adding this style would do it:
#loop-news {
text-align:center;
}
This causes all inline content of #loop-news to be centered. Note that this also renders text-align:center on the <h1> unnecessary.
Here's a JSFiddle to show you what this does. If this isn't what you wanted though, let me know and I'll be happy to help further.
I am trying to wrap an image with some adjacent text, and i can align it to top-left and top-right using align="" attribute or float. But how can i align image to the vertical and horizontal center of whole text after wrapping.
Like this:
I have tried below code,
<p>
<img align="middle" src="http://placehold.it/140x100" /> Some More text Here....
</p>
You won't be able to do it with a single block of text (I can't think of a single instance where it's aesthetically pleasing and functionally desirable, but I'd love to be proved wrong), but you can with two columns. There's a great article on it here:
http://alistapart.com/article/crosscolumn
Essentially, you use pseudo-elements to create an empty space that is the same size as the image, then position the image onto that space.
Solution 1
Fiddle 1 for the image shown in the question:
CSS:
html, body
{
height: 100%;
width:100%;
margin:0;
padding:0;
}
#main{
width:100%;
text-align:justify;
margin:0;
padding:0;
}
.class1{
position:absolute;
}
#child1{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
text-align:justify;
margin:0;
padding:0;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
Solution 2
If you want to wrap the text around the only way to do it is using float.See this Fiddle 2
CSS:
.class1 img{
float:left;
}
Solution 3
But the above solution will not allow you to center the image.For centering image you will have to do
some trick like this Fiddle 3 . But this will require large amount of effort to adjust writing between the two columns/divs.
I have some elements I want to display. But sadly it does not work the way I want it.
Here is how it works:
http://jsfiddle.net/lukasoppermann/H3Nmg/7/
I want it so that the red boxes fill the space between the green box and the left side.
It needs to be dynamic though. The width of the container might change and the order of the elements can be different.
I would of course prefer a css-only way, but js is fine too. Does anyone have any tips?
// EDIT
To clarify, the elements cannot be hard-coded or floated to the right, because the number of elements, the width of the wrapper and also the number of green elements can vary. The order of the elements can vary too. I basically need the elements to arrange themselves without any wholes automatically.
Thats what I want.
http://img526.imageshack.us/img526/613/boxsorting.jpg
Hi you can define three div as like this
css
.container{
float:left;
margin-left:10px;
}
.top{
width:100px;
height:100px;
background:red;
}
.middle{
width:100px;
height:100px;
background:darkred;
margin-top:5px;
}
.right{
width:100px;
height:200px;
background:lightgreen;
float:left;
margin-left:10px;
}
.bottom{
float:left;
width:100px;
height:100px;
background:green;
margin-left:10px;
}
HTML
<div class="container">
<div class="top"></div>
<div class="middle"></div>
</div>
<div class="right"></div>
<div class="bottom"></div>
Live demo here http://jsfiddle.net/rohitazad/wyvrt/1/
What about using float:right to row-two div. You might have to fix the padding to make the green closer to red if you want. demo here http://jsfiddle.net/H3Nmg/9/
Should it look like this http://jsfiddle.net/H3Nmg/14/
Minus the hard coded width.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/H3Nmg/20/
demo: http://jsfiddle.net/H3Nmg/20/embedded/result/
Note: try to reduce the window size or width of the container div you will see the case and case output will come.