Slicing a psd with div+css - css

I'm slicing a psd, and there is a part of the screen that will repeat with as many items as it needs, similar to the question list of stackoverflow.
It needs to have this structure:
Is it possible? How should the css be?
Thanks!

You could try the following:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
}
#user-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<!-- The rest of the page's content goes here. -->
</div>
</div>
This makes the "content" div fill the rest of the space that "user-content" doesn't fill. It will only be an issue when your content is taller than the user content... but that's a different problem :)
This is another possiblity:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
float:left;
}
#user-content {
float:left;
}
#page-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<div id="page-content">
<p>This should take up the rest of the space.</p>
</div>
</div>
</div>

The problem lies in your left div where you state "width can increase depending on the content". How is this width defined? The div to the right can expand to 100% of the remaining space but you must define the relationship between the left and the right divs by either providing a fixed width to the left div or providing a percentage to both that equals 100%.

Well, as you’ve probably seen, so.com used fixed width div’s to achieve your layout goal.
Obviously my first tries setting the width automatically failed, but maybe I’ve a useful workaround for you: use left and right floating of both boxes.
<div style="border: 1px solid #000000; width: 60%">
<div style="border: 1px solid #444444; float: left;">
some text
</div>
<div style="border: 1px solid #999999; float: right;">
foo
</div>
</div>
Of course this will only help if I understood your question correctly ;)

As far as I know the only way to give your variable width container a variable width and float it to the left is to give it {width:auto;float:left;}
But I don't know if you can do anything useful with this because if you have text or a lot of small fixed width items to put in this container, they will keep expanding out along the first line until they've filled the width of the outer div before going on to the second line. They won't fill up the whole height and then push outward gradually as the text gets too much to contain.

Just a thought - you might be able to do some nifty JavaScript (possibly using jQuery?) which sizes those divs like you need them.

Related

Css for text in a container continue on new line and have the container expand downward i necessary?

Looking for a way to have text in a container continue on new line and have the container expand downward i necessary?
Update
<div class="modal hide fade" id="modalRemoveReserve" style="display:none;">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h1>Test</h1>
<div style="border-bottom:1px solid #aaa;"></div>
<br />
<div id="reservesTextContainer">
Text here... lkjasflj fljas fsaj flsjfkd skl
</div>
</div>
<div class="modal-footer">
</div>
</div>
#reservesTextContainer {
width: 150px;
height: auto;
word-wrap: break-word;
border: 1px solid red;
}
Isn't that normal, unless your div is inheriting the height from the div it is contained within.
If you want a container to have a fixed width but have the height of the container vary with the amount of text within it you can do something simple as:
HTML
<div class="container">
Some text here
</div>
CSS
.container {
width:100px;
}
See the jfiddle here (you can add as much text as you want and the container will get bigger):http://jsfiddle.net/vagish/Ve7Mj/
If your container is within a div which has a fixed height then you may have issues. You'd have to make that container have a varied height. Making the height vary can be down by the CSS height:auto;.
Also you could just make the text within that container overflow by doing the following with the CSS (not really recommended).
.container {
overflow:visible;
}
Based on Updated Code in Question
jsfiddle of updated code show that it works. I've also added this CSS functions:
.modal-header {
height:auto;
}
#modalRemoveReserve {
height:auto;
}
Although they may have undesirable effects if a fixed height has already been set.
It sounds like you want to look at word-wrap:break-word; combined with ensuring the parent element has height:auto
Demo Fiddle
The word-wrap CSS property is used to specify whether or not the
browser may break lines within words in order to prevent overflow (in
other words, force wrapping) when an otherwise unbreakable string is
too long to fit in its containing box.

CSS: automatically sizing a image based on its dimensions, and having similar div fill the gap

I have a question pertaining to CSS and HTML. I currently am building an article template, and am a little stumped on one aspect.
I plan to have a picture on one side, and have a text box of the same height on the opposite side. Both are surrounded with div tags as seen in the source following.
<!--begin article-->
<div id="article">
<div id="article_header">
Title goes here
</div>
<div id="article_body">
<!-- begin text. used for actual text of article-->
<div id="text">
Text Goes here
</div>
<!-- end text-->
<!-- begin article media. used for pictures -->
<div id="article_media">
<img src="source_goes_here" alt="This is an image!">
</div>
</div>
</div>
And the CSS...
#article{
border:1px solid gold;
margin-bottom:20px;
}
#article_header{
padding:5px;
font-family:arial;
font-size:36px;
font-style:bold;
color:white;
background:url('orangegradiant.png');
}
#article_body{
padding:5px;
display:inline-block;
width:auto;
}
#article_media{
border: 1px solid pink;
text-align:center;
display:block;
width:48%;
height:48%;
}
#text{
display:block;
width:51%;
float:right;
}
I know I probably over div at times, but I have been toying with this for about an hour and have hit a brick wall. I have the layout set, or so it would seem, by using the float property. The question is how do I get the image div to dynamically change, and have the text div go up or down in size based on the size of the image? Is there a way to set a ceiling for the image size? I would like to see the image be no bigger than about 50% of the div, that way massive images don't skew everything out of proportion.
Any help is greatly appreciated!
P.S. apologies for any code formatting issues. I am still trying to get everything figured out on that front.
Add to your CSS
#article_media img { max-height:50%; }
Or if you want the containing div itself
#article_media { max-height:50%; }

3 column, fixed header, sidebars fixed, content scrollable

Can anyone assist me with the following div layout? I have tried a couple of solutions, however, the only way i have been able to accomplish this is using tables.
I had a look at Holy Grail 3 Column Layout, however, this layoyt is not 100% height, and header is not fixed, i also need only the content to scroll, the sidebars needs to be fixed 100% height
It seems the answers here ignored most of your requirements. I stumbled upon this because I am having a rendering issue with the same layout you are after. I forked the fiddle above to show you:
http://jsfiddle.net/RsRf9/2/
The major difference is that the entire body is scrollable, not just the tiny area in the center (I think this is what you are after).
Aside from cleaning up styles that weren't doing anything (like floats while position fixed), the major change is to the center col - all you should need is this:
.center{margin:100px 200px;}
The other change is how you get that "height 100%" effect on your sidebars - my trick is to do this:
.left,.right{width:200px;top: 100px; bottom: 0px;position: fixed;}
Instead of height 100%, I simply tell it to stretch from top 100 (the bottom of the nav) to bottom 0 (the bottom of the page)
That will push the content bellow the top nav and in between your two fixed side bars.
I have created a working fiddle as per your requirements:
Here is working fiddle - UPDATED to include fixed header ONLY TOP BAR IS FIXED
The important thing to note is the structural layout of the divs... notice that the .center is AFTER the .right
<div class='wrap'>
<div class='head'>Header</div>
<div class='bodywrap'>
<div class='left'>left</div>
<div class='right'>right</div>
<div class='center'>center center center center center center center center center center center center ... blah</div>
</div>
</div>
and the css is:
JUST HEADER FIXED:
html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%} << UPDATED for fixed header
.bodywrap{margin-top:100px;width:102%;margin-left:-1%} << UPDATED - Terrible hack and you may find something more elegant
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;}
.right{float:right;}
.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}
HEADER AND SIDEBARS FIXED (Also was able to fix dirty hack for .left and .right undersizing
html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%}
.bodywrap{margin-top:100px;margin-left:-8px}
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;position:fixed}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;margin-right:191px}
.right{position:fixed;right:0}
.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}
Here is with top and sides fixed center scroll liquid center column (and no gaps on .left and .right)
It's basic use of floats but the structural markup layout is key ;)
I use the YUI grids style sheet for this kind of layout. It is tried and tested and works in multiple browsers.
This is actually quite easy to do in a rudimentary sense, you don't need tables (or table-cell) but mixing px and % sizes can be problematic. If you stick to % your page will resize better anyway. Handling the cross browser issues takes a bit more CSS tweaking, but there are plenty of grid solutions out there that implement tried and tested solutions even for IE6 and frameworks like twitter's bootstrap will offer a lot more on top.
In other words, this is a solved problem, but here's a quick example of how you can get there by hand;
<div class="container">
<div class="header">
header
</div>
<div class="left">
left
</div>
<div class="main">
content
</div>
<div class="right">
right
</div>
</div>
And the CSS;
html, body, .container
{
height:100%;
}
.container
{
background-color: pink;
}
.header
{
background-color: yellow;
height:50px;
}
.left
{
background-color: red;
float:left;
width:10%;
height:100%;
overflow: hidden;
}
.right
{
background-color: blue;
float:left;
width:10%;
height:100%;
overflow: hidden;
}
.main
{
background-color:#fefefe;
float:left;
height:100%;
width: 80%;
overflow-y:scroll;
}
And of course the Fiddle
Using % sizing will also allow you to approach a more responsive design that works for tablet and mobile. Again, many of the grid frameworks out there are 'responsive' in design.
You can use scrollToFixed plugin for left-sidebar and right-sidebar fixed and center column content only scroll up side and downside.
For demo scroll use below link
http://bigspotteddog.github.io/ScrollToFixed/
And one more thing use Bootstrap for design UI.
Include Bootstrap CSS and JavaScript in your page header part
<div class="container">
<div class="col-md-12">
<div class="col-md-3" id="left-sidebar">
left-content
<div>
<div class="col-md-6" id="center">
center content
</div>
<div class="col-md-3" id="right-sidebar">
right-content
</div>
</div>
</div>
You can modify as per your requirement. I just give you general hint.
Just write below script for scrolling
$(document).ready(function(){
$('#right-sidebar').scrollToFixed({
marginTop: function() {
return 5;
},
limit: function() {
return (
$('#footer-widgets-bg').offset().top - $('#right-sidebar').outerHeight(true)
);
},
zIndex: 1,
removeOffsets: true
});
});

Stack divs on top of each other in 2 rows without whitespace

I really need your help on this one:
Right now I have divs just on top of each other, filled dynamically with diverse contents so the heights are changing.
What I want to do now is to place them in 2 rows. With a fixed width and "float:left" this kinda works already.
My english is not the very best so pls take a look at my example picture first:
As you can see there is this whitespace because of the third div which doesn't start right beneath the first div because of div number 2 which CAN BE higher as the first div.
I now wonder if there is a possibility to automatically position those divs higher so that there is no whitespace (they always should start right beneath the picture which is above wouth the whitespace, left or right).
LIKE THIS:
I hope you kinda understand what I mean :D Thanks in advance for replys!
EDIT:
Code-Example:
<div id="content">
<div class="xyz">BLABLA</div>
<div class="xyz">BLABLA<br>morebla!<br>EVEN MORE BLA</div>
<div class="xyz">BLABLA</div>
</div>
<style>
#content {
width: 648px;
}
.xyz {
width: 303px;
float: left;
border:1px solid black;
}
</style>
Remeber, heights are always different!
jQuery masonry makes your life a lot easier.. don't reinvent the wheel, especially when you're facing a classic css problem.
this will do it...
<div id="content">
<div class="column1" id="left">
<div id="div1">...</div>
<div id="div3">...</div>
</div>
<div class="column2" id="left">
<div id="div2">...</div>
<div id="div4">...</div>
</div>
</div>
Then just style column2 styles by defining widht values in your css.
Thanks,
#leo.

css equivalent of table-row

I am trying to shift my style away from using tables to control formatting, but I haven't seen a simple css solution that does exactly the same thing as
<table><tr><td>aribitrary-html-A</td><td>aribitrary-html-B</td></tr><table>
All I want is to make sure aribitrary-html-A and aribitrary-html-B are aligned horizontally. I have tried various CSS concoctions using display: inline, clear: none, and float: left but they all have unwanted side-effects of moving my content around, while the table-tr solution just does what I want, regardless of what's in the arbitrary HTML, and regardless of what is in HTML that contains my table.
Am I missing something?
Why not use a grid system then like 960gs
You probably need this
<div id="wrap">
<div id="left">
content 1
</div>
<div id="right">
content 1
</div>
</div>
#wrap {
width: 50%; /* change this as you wish */
}
#left, #right {
display: block;
float: left;
}
You need to use <div>s and decent CSS. For people that aren't confident enough (or lazy, like me) Yahoos YUI CSS Grid Builder is invaluable! Enjoy!
Maybe this might help you?
<div style="width:400px;margin:0 auto;">
<div style="background-color:red;float:left;height:200px;width:200px;">
</div>
<div style="background-color:blue;float:right;height:200px;width:200px;">
</div>
</div>
Just don't put your css within style attributes like I did.
Just create two Divs and align the one you want to have on the left side.
Like so (update):
<div id="wrap" style=" width:300px;
margin:auto;
border: 1px solid black;
padding:1px">
<div id ="A" style="float:left;
border: 1px solid black;"> aribitrary-html-A </div>
<div id = "B" style="border: 1px solid black;"> aribitrary-html-A</div>
</div>
Update: I added a wrapper with a defined width. Also I used some borders to visualize the table-like layout. Hope that helps.
Wrap element in a div, set fixed width for the wrapper. Give each element in the div a width and set the margin to 0 auto.
Just set the CSS "float" property to left on every element you want to display horizontally, and make sure each of those elements have a set width.

Resources