I have two divs floating left. I dont really want to use position absolute though, is there another way to keep the side by side without using position absolute? or is this the only way?
<div class="moreinfo" id="darkgray">
<p>
Today, hate speech continues to profilerate throughout the Internet, normalized in the form of YouTube comments, animated GIFs, and tweets. Online anonymity affords users a sense of security that fosters a culture of cruelty and bigotry. Our goal is to create a conversation about the consequences of hateful speech that rethinks how we communicate online. Social media is full of positive potential; we can tap into it by holding each other accountable.
</p>
</div>
<div class="moreinfo" id="lightgray">
<h2>
"WE NEED TO TEACH OUR CHILDREN NOT TO STAND SILENTLY BY WHILE OTHERS ARE BEING TORMENTED. IN THE END, THEY WILL BE SAFER ONLINE & OFFLINE."
READ ARTICLE BY WIRED SAFETY
</h2>
</div>
<div class="clear"></div>
css
.moreinfo{
width:715px;
height:250px;
float:left;
color:white;
}
You can use display: inline-block to have them side by side.
Here is an example: http://jsfiddle.net/2sZCb/
.moreinfo {
display: inline-block;
}
Here is a good article on the same issue you're having:
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
the best way i noticed was to use percent 50% for the width of both
the css you have written is work correctly for keeping div side by side, but you have to take precaution about the width of the inner floating divs, it should not be greater than the parent's width.
try this (reduce the width of the moreinfo just for demo.):
.moreinfo{
width:150px;
height:300px;
float:left;
color:black;}
the best solution is using display:table and display:table-cell for being sure that they are side by side
Set the containing element to a width large enough to contain both the way you want.
body {
min-width: 1450px;
}
Here's a fiddle
Related
Our organization works in a content management system and for expedited reasons we've arranged pictures using tables. I'd like to get away from that practice and provide a road map (CSS) to doing it properly.
We arrange pictures in a row side-by-side with a title under the picture, normally two lines of text.
Here is an example of what I start constructing.
<style>
#piccaption
{
font-size: x-small;
}
#picimages
{
text-align:center;
margin:0px auto;
}
#picimages a
{
margin:0px 0px;
display:inline-block;
text-decoration:none;
color:black;
}
</style>
Using this with my HTML...
<div id="picimages">
<img alt="Picture ALT" src="http://webaddress.com/picture.jpg" width="140px" height="203px" />
<div id="piccaption"><span>Picture Caption</span><br />
<span>Second Line</span></div>
</div>
</div>
Can someone help me with the proper way to do this as well as place a 2nd, 3rd picture next to this first one with a nice padding between the pictures?
Thanks,
Dave
An easy way to lay multiple blocks out horizontally would be to set the display to inline-block, with margins on either side to space them the way you like. Inline-block works in all browsers from Internet Explorer 8 and up (if you really need to make it compatible with Internet Explorer 7, you can add *display: inline after the inline-block).
The advantage of using inline-block instead of floats is that even if an image has an exceptionally long caption, the layout doesn't break as it would with floats.
Also, be sure to use classes instead of IDs for elements that occur more than once on a page.
Here is a jsFiddle example based on the code you pasted: http://jsfiddle.net/skymaiden/zvpHW/
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
I have divs after each other that look like this.
<div class="tag">one tag</div>
<div class="tag">second tag</div>
<div class="tag">third tag</div>
...50 more of them....
(in CSS)
.tag {
display:inline
}
I found out that I have too many of them and they start breaking in the middle, and I don't want that.
However, when I set the nowrap like this
.tag {
display:inline;
white-space:nowrap;
}
all of them are on one line, making more than 100% of the window. I don't want that.
What I want: if there are too many of these divs on one line, the list of the divs can break, but the divs themselves don't. I just don't want to break the divs in the middle.
I hope I tell it clearly enough.
If I understand right, you want them to lay side to side, and then break to a new line when the row is full, but not in the middle of a div.
All you need is
.tag {
float: left;
}
See fiddle here for demo.
You can also add padding-left: 5px; if you want some space between them.
.tag {
display:inline;
white-space:nowrap;
float:left;
}
That worked. (and adding "clearing" empty div with clear:both under that.)
Depending on the browsers you need/want to support, you may find using
.tag {
display:inline-block;
vertical-align:top;
}
a better solution. Since it is a <div> that you want to apply this to, the style will not work out of the box for IE5-7 - see http://www.quirksmode.org/css/display.html#t03. There are workarounds of course - How to fix display:inline-block on IE6? - if you want to use it with those browsers.
The benefit of inline-block is that you do not need to clear the floated content and also that your elements are not rendered out of normal flow. I try to avoid floating elements where possible as in my experience it has caused layout problems.
However, there are a couple of potential catches with this approach. One of which I have already addressed, by adding a vertical-align:top rule. See a previous answer for why this happens - https://stackoverflow.com/a/12950536/637889
The other is due to potentially unwanted white-space between the inline-block elements. See http://css-tricks.com/fighting-the-space-between-inline-block-elements/ for some clever ways around this.
When creating HTML5 and CSS3 designs is it better to primarily use margin and padding for your designs over positioning or the other way around?
I've never really thought about it before and use both side by side to get the results where needed but it's possible to design in both ways as shown in the examples below:
HTML
<div>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
</ul>
</div>
CSS Example 1 - Using margin, padding
div{
width:1000px;
margin:auto;
}
ul{
margin-left:10px;
width:100px;
}
li{
height:30px;
}
span{
margin-top:10px;
}
CSS Example 2 - Using just positioning
(Apart from the margin:auto ..)
div, ul, span{
position:absolute;
}
div{
width:1000px;
margin:auto;
}
ul{
left:10px;
width:100px;
}
li{
height:30px;
}
span{
top:10px;
}
For a typical page layout, Example 1 is much cleaner and you should choose that, given the choice.
Example 2 is bad because as soon as you start setting position: absolute on everything, any flexibility your design may have had goes out the window. You have to set explicit dimensions on everything.
In general (there are exceptions), avoid position: absolute for the main layout unless it's only way to do it.
Here's an example of the kind of problem I was talking about. It would appear that the user ended up using JavaScript to fix his problems. Not good.
All of the above. Positioning is good for things that pop out or can be dynamically created. Sometimes the positioning is actually a derived placement. The padding and margins generally are used for how those elements will be placed in relation to other elements. So an item can have padding, margins, and positioning and have all those attributes be relevant to the element.
A common theme is to get the client environment and then design based on relation to their viewable area.
See this link https://stackoverflow.com/a/8857735/1026459 for javascript to get client screen size (cross-browser compliant).
as rule of thumb, position rules are most suitable, as implied by their name.
margins are not very reliable due to their model inconsistency across browsers, thus less adapted for that purpose.
having said that, most layout techniques are a mash-up of both of these, and both are used in conjunction.
Wondering if I can get some help here. In the fiddle I have most of the necessary markup.
http://jsfiddle.net/theDawckta/54z3J/
I cannot figure out how to make the columnItem in column 1 to extend to the bottom of the row. What I would like to see in column 1 is the green fill up the red row part while leaving the black content the same size.
I think it's impossible, so good luck, I have had enough of this.
I actually cut out quite a bit of your code, so apologies in advance if you needed those extra divs (but it shouldn't be too difficult to add them in later). Also, you may want to test this in IE--I'm not sure what version this cuts out on (but I think it works in IE7+).
HTML
<div class="row">
<div class="column">
<div class="columnItem">
<p>Content</p>
</div>
</div>
<div class="column">
<div class="columnItem">
<p>Content</p>
</div>
<div class="columnItem">
<p>Content</p>
</div>
</div>
</div>
CSS
.row {
overflow:hidden;
}
.column {
float:left;
width:50%;
padding-bottom:10000px;
margin-bottom:-10000px;
}
/* You can remove everything under this comment */
.columnItem {
padding:10px;
margin:5px;
background:blue;
}
.column:nth-of-type(1) {
background:yellow;
}
.column:nth-of-type(2) {
background:pink;
}
How it works
It's really quite simple. Each row hides everything past where the actual content is (with overflow:hidden; while each column pushes itself downward 10,000 pixels with padding-bottom:10000px;, and then back up again with margin-bottom:-10000px;. The number of pixels can be increased or decreased, just make sure it's large enough to fit your content.
P.S. - Anything is possible, the impossible just takes longer. ~ NSA
Omer Ben-Nahum suggested tables, but I'm not sure that is how you want to mark up your content. There really is no way to achieve this effect using CSS, but you can use some workarounds that give the site the appearance that you were able to get it to work. Look into using Faux Columns as an alternative to tables.
bfroh's solution is one i've used several times before, but in general I usually use a background image to emulate situations like this (where the content in one div isn't making it tall enough)
The wrapping container's background image could have the background color for the entire left div and just set that to 'repeat-y'
Dealing with these sort of issues (in my experience) either pretty much entails the hack that bfroh posted or a solution like this.
Hope it helped!
You cannot do it using css, but you can do this via javascript method.
I wouldn't recommend that because it means that you will have to run the script each time the content changes and I'm not sure you always know when it does.
If this issue is important to you, I suggest you use tables.