I have headlines that should appear next to floated images if there is enough space, and drop below the images if not. I don't have access to the HTML, so I must do this in strictly CSS. This is an example of an image and headline HTML I receive, and what it ends up looking like on an iPhone, for example:
<p>
<img src="http://farm3.staticflickr.com2852/1232.jpg" style="height:265px; width:350px; float: right;"/>
</p>
<h3>THE HEADLINE</h3>
I've fixed this when it comes to wrapping <p> content around an image using the following trick, which creates a fixed width element before each paragraph which acts as a minimum width:
p:before { content: ""; width: 10em; display: block; overflow:
hidden; }
However, this approach does not work for a header. Any ideas?
is that what you are looking for?
http://jsfiddle.net/zh4AV/1/
html:
<div id="container">
<img width="100" height="100"/>
<p>headline</p>
</div>
css:
#container{
max-width:200px;
}
img{
float:right
}
Related
Here's the fiddle I'd like to have those divs in right column to fill the height. So the first div should start at the top, and the last should end at the bottom, and the space between each div would be the same. How can I achieve this ?
<div>
<div class="left">
<img src="http://serwer1307713.home.pl/bg.png" />
</div>
<div class="right">
<img src="http://serwer1307713.home.pl/bg-2.png" />
<img src="http://serwer1307713.home.pl/bg-2.png" />
<img src="http://serwer1307713.home.pl/bg-2.png" />
<img src="http://serwer1307713.home.pl/bg-2.png" />
</div>
This is how I would like to make it looks like
I've forgotten to add one important info, I need that to be responsive ;)
I think this is what you mean, your images do not reach the end of the page?
Add this to your CSS file:
body {
padding:0;
margin:0;
}
It's not that easy, but I think I did it: http://jsfiddle.net/Whre/X3vKd/2/
I added some wrapping divs and used :before and :after pseudo elements to enforce equal heights:
.wrapper {
position:relative;
display:inline-block;
}
.wrapper:after {
content:".";
display:block;
visibility:hidden;
height:0;
}
Assign a height property to your html and your respective divs, then you can manually specify the height for the images in your right or left divs, like so:
.left img {
height: 42%;
}
.right img {
height: 10%;
}
html, body {
height: 100%;
}
Fiddle: http://jsfiddle.net/y8sw9/4/
I have done this with js. Have a look
jsfiddle.net/y8sw9/6/
I want to create a <div> element with background color, which starts in the middle of the screen and goes to the right, to the end of the page (out of screen) , but I don´t want to trigger any scroll bar. In that <div> I want to have some information, at the beginning of that <div>(within the screen). Here´s the HTML code example:
<div id="footer">
<h2>Information</h2>
<p>Some text</p>
<p class="alignright">Another information in this paragraph.</p>
</div>
This is how I want it to look like:
http://postimage.org/image/h60apjfjf/
CSS will let you do this easily. Something like the following:
#footer {
background-color: #b0c4de;
width: 50%;
height: 20px;
float: right;
}
This is a pretty good resource: http://www.w3schools.com/css/default.asp
Can´t you just use css background-image of the body to achieve that effect?
You can do this by wrapping the footer div in another div. This will not only allow you to fully position the footer div but it will also allow you to put the footer div outside without generating a scrollbar or showing the overflow.
For example:
<div id="footer-wrapper">
<div id="footer">
<h2>Information</h2>
<p>Some text</p>
<p class="alignright">Another information in this paragraph.</p>
</div>
</div>
#footer-wrapper { width:300px; height:100px; position:relative; overflow:hidden; }
#footer { position:absolute: top:50px; left:50%; width:300px; }
etc.
The position:relative means that the footer div, with position:absolute, will use the wrapper as the position reference. Overflow:hidden will prevent scroll bars and will hide the overflow.
You can do something like that :
#footer {
float: right;
width: 50%;
background-color: blue;
overflow: hidden;
}
The overflow hidden isn't necessary but in case a scrollbar appears, with this it won't.
EDIT: example: http://jsfiddle.net/8nu68/
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Vertically Center HTML Element Within a Div of Dynamic Height
I am currently designing a website for which i need to vertically center some content. The design is pretty basic: a fixed height header (left-aligned and always at the top of the page), and underneath that vertically centered images in a horizontal row (yes, horizontal scrolling, i know).
Ideally i would want the vertical centering of the images to be based on the 100% height of the viewport - the header (so a dynamic height that prevents the content from overlapping the header).
An example of the website can be found on http://bit.ly/vl1XNY, which is currently using tables for layout. The css and html i used can be found there too (of course).
I am aware of various solutions for centering content vertically within a container of fixed height, however none of them have worked for me because i'm using variable height and do not want to use absolute positioning (to prevent overlap). I have looked around and tried the table-cell solution, the line-height one, and the absolute positioning one.
So far the only solution that has worked exactly as i intended was using tables. But i would like to refrain from using them. Is anyone aware of a valid css and html solution for this problem? Or at least a more graceful solution?
Wohh, talk about timing, i was looking for such a solution just a few minutes ago and stumbled upon an article on this subject exactly, you can read it all about it here: Centering in the Unknown.
You can easily modify your code to make it work like so:
CSS
#wrapper {
background: none repeat scroll 0 0 blue;
height: 100%;
text-align: center;
}
#wrapper:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.center {
display: inline-block;
padding: 10px 15px;
vertical-align: middle;
width: 460px;
}
HTML
<div id="wrapper">
<div class="center">
<img src="images/a_1.jpg" alt=" ">
</div>
<div class="center">
<img src="images/a_2.jpg" alt=" ">
</div>
</div>
You can try the following code:
<div style="display:table-cell;">
<img src="..." style="... vertical-align:middle;">
<img src="..." style="... vertical-align:middle;">
</div>
Please check the above code in the context of all HTML:
<style type="text/css">
html, body {height:100%;}
body {
margin:0; padding:0;
}
#header {
height:1.7em;
}
#content {
display:table-cell; vertical-align:middle; height:500px;
}
</style>
<div id="header"></div>
<div id="content">
<img src="..." style="... vertical-align:middle;">
<img src="..." style="... vertical-align:middle;">
</div>
This will only work with a fixed height table-cell, which can be achieved by calculating current viewport height with javascript
I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.
The sidebar is to hold links and the content section is to load said links.
My goal is to get the sidebar expanded all the way down to the bottom of the page as well as the content section.
Here is my css:
html, body {
height:100%;
margin:0px;
padding:0px;
}
#wrapper {
position: relative;
min-height: 100%;
}
#sidebar {
position: relative;
float:left;
width: 150px;
overflow: hidden;
min-height: 100%;
}
#pdfholder {
float: right;
width: 600px;
}
And here is my html:
<body>
<div id="wrapper">
<div id="sidebar">
<iframe id="sidebarframe" name="index" src="./sidebar.html">
</iframe>
</div>
<div id="pdfholder">
<iframe id="pdfholderframe" name="viewer" src="./blank.html">
</iframe>
</div>
<div style="clear: both;"></div>
</div>
</body>
I know I am doing something wrong but I have gone through around 10 different websites and I cannot for the life of me find it!
You can give both containing divs a min-height of 100% and there's not much more you need to do:
http://jsfiddle.net/GolezTrol/eHMec/
You can give the iframes a height of 100% too, but it didn't become clear to me whether you need that or not.
From what I can understand from your question, this JSFiddle (simpler version here) should do the trick.
CSS
div
{
background: black;
}
div div
{
margin-left: 150px;
background: white;
}
div ul
{
float: left;
color: white;
}
HTML
<div>
<ul>
<li>Nav bar</li>
<li>More nav</li>
</ul>
<div>
Content
</div>
</div>
Obviously this is a very simple example and you should give your elements classes or IDs if needbe; I wanted to keep it simple.
The principle of this is a float: left, a margin-left: 150px and some background-color properties. You give your container div a background colour of whatever you want the sidebar to be coloured as, and then set the content divs background back to white, or whatever you want that to be.
The float: left for the navbar ul means the main content is pushed back to the top.
The margin-left: 150px gives the navbar 150px on the left of the content to expand into. Obviously you should change this to the width of the navbar.
Scenario:
One header DIV with three DIV's inside side by side floated left.
Problem:
"Text" from HEADER_A div is overflowing into HEADER_B DIV and so on.
Screenshot / CSS:
alt text http://thumb0.webshots.net/t/74/174/8/92/12/2239892120105349420zNlkOc_th.jpg
#header{
height:127px;
width: 718px;
}
#header_a {
width:181px;
height: 127px;
color:#FFFFFF;
float:left;
}
#header_b{
width: 363px;
float:left;
height: 127px;
/*background-image:url(../images/logo.jpg);*/
background-position:bottom;
background-repeat:no-repeat;
background-color:#006600;
}
#header_c{
width: 174px;
float:left;
height: 127px;
}
<div id="header">
<div id="header_a">ddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
<div id="header_b"></div>
<div id="header_c"><img src="images/nuevo.png" /></div>
</div>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddd is > 181px.
Its obviously going to overflow because its taken as a single word and words are not broken up. Try using some proper text or give some space like "ddddddddddd ddddddddddddd ddddddddddddddddd dddddddddddddd"
EDIT:
on the other hand the same will happen to images. So anything within the div that is larger than its parent will overflow. you can try using 'overflow:hidden'