Div floating left, another inline to the right - css

I have a feeling that this is the most fundamental of questions, and after 5 years of messing about with CSS, I should know the answer to it.
I have two divs with classes of pane-node-field-imageown and pane-node-field-short-place-intro. They are at the top of my page which is wrapped in a div with class burr-flipped-content-inner.
HTML
<div class="burr-flipped-content-inner burr-flipped-content-region-inner panel-panel-inner">
<div class="panel-pane pane-entity-field pane-node-field-imageown">
<div class="panel-separator"></div>
<div class="panel-pane pane-entity-field pane-node-field-short-place-intro">
<div class="panel-separator"></div>
<div class="panel-pane pane-vtiews-panes pane-og-nodes-panel-pane-2">
</div>
With the div that has the pane-node-field-imageown class, I would like to float it to the left.
CSS
.pane-node-field-imageown
{
float:left;
display: inline-block;
}
I added the inline-block value as it seems to best suit. The problem is getting the pane-node-field-short-place-intro div to sit nicely to the right of the first block. It seems to want to hide behind it (although my text seems to sit ok). The only way I can get the desired behaviour is with this CSS to the second block:
.pane-node-field-short-place-intro {
display: table;
padding: 0 10px;
}
.pane-node-field-short-place-intro .pane-content {
background: none repeat scroll 0 0 #444444;
padding:10px;
}
This doesn't feel right. My page can be viewed here for reference.

You could just do this:
.pane-node-field-short-place-intro {
padding: 3px 5px 0 20px;
overflow: hidden;
}

jsFiddle - CSS Floats
http://jsfiddle.net/kn9RE/9/
CSS Normalize - Be sure to make the the FIRST referenced style sheet
http://necolas.github.io/normalize.css/
First off, you are over-engineering your front-end markup. I say this because your current markup resembles "Div Spaghetti". I would start by evaluating your html code as a whole, remove all CSS and get a solid feel for the structure of your page. Although there are easy ways to go-about resolving this issue, its always best to analyze your code and ask yourself "can this be done with less markup?". Don't jump to take the easy way out, you will often end up with a code-base full of poor habits.
If you must use your existing HTML, you could apply a band-aid to your problem like so;
.pane-node-field-imageown
{
float:left;
}
.pane-node-field-short-place-intro
{
max-width: 660px;
float:left;
padding: 10px 5px 0 15px;
}
.field-item even
{
}
This should get you started, if you have any questions Please feel free to message me.

Related

CSS Flexbox dynamic aspect-ratio code is influenced by content

For a webpage grid-layout I decided to use Flexbox. Now I wanted to implement some "auto-functionality", so that grid-boxes can later be inserted without the need to add classes or styles in the HTML. One of this features is to make a box allways be 75% as tall as it is wide - even if the box is resized by, for example, browserwindow resize. Off course, if the boxes content extends the 75%-height, it should (and only then should) increase its height to fit the content. I searched for hours to find a suitable solution, but I finally got it working. So I thought at least, until I added content to the box.
The auto aspect-ratio works fine, as long as the box is empty. If I add content, the 75% of the width is allways added to the height it has through extension by its content. I made a jsfiddle to clearly visualize the problem:
JSFiddle wd5s9vq0, visualizing the following Code:
HTML-Code:
<div class="container">
<div class="content-cell"></div>
<div class="content-cell"></div>
</div>
<div class="container">
<div class="content-cell">
This cell has an inreased height because of
it's content. The empty space below the
content is the 75% of the cells width.
</div>
<div class="content-cell"></div>
</div>
CSS:
.container {
display: flex;
width: 400px;
}
.content-cell {
flex: 1 1 0;
margin: 10px;
background-color: #ccc;
}
.content-cell::after {
content: "";
display: block;
padding-top: 75%;
}
If I didn't knew it better, it looks like a floating-problem - but I think the ::before / ::after selector should add the block-element before the element it is used on and not inside it.
Does anyone has an idea on how to fix this problem?
This seems to be a very widespread problem on the internet, and most solutions you find are either about wrapping the content, absolute-positioning the content or a mixture of both. This has numerous and case-dependent downsides. After hours of playing around with the code, I finally found a combination of CSS proporties that work without the need to add any DOM or make the content absolute-positioned. This looks quit basic, and I am wondering why it took me so long and why you can't find it out there on the web.
The HTML:
<div class="mybox aspect-full">
This is text, that would normally extend the box downwards.
It is long, but not so long that it extends the intended aspect-ratio.
</div>
The CSS:
.mybox {
width: 200px;
}
.aspect-full::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
The only downside I could find is that the content of your cell must float. If you use clear on one of your child objects, it is positioned below the expander-block and you are back to the original problem. If you need to clear the floating of divs inside of these aspect-ratio-cells, you might consider to wrap them and keep the wrapper floatable.

how to stop inline-block whitespace being rendered in the browser

Roughly speaking, attempting to build a four-column layout, I've got this HTML:
<div>
<div>A column</div>
<div>A column</div>
<div>A column</div>
<div>A column</div>
</div>
And I've got this CSS:
div {
background: #ccc;
}
div div {
background: #eee;
display: inline-block;
width: 25%;
}
-> Fiddle me this <-
When rendered in the browser (Currently, I have been testing with Chrome only) the whitespace between the nested div elements (in this example the whitespace is caused by line breaks) is rendered, thus throwing my layout out.
Clearly, I can float my nested divs...
div {
background: #ccc;
}
div div {
background: #eee;
width: 25%;
float: left;
}
-> Fiddle me that <-
But then my container div collapses and I don't want to have to have to use CSS clearfix hacks or extra HTML to open it back up.
Alternatively I can modify my HTML such that the whitespace is removed...
<div><div>A column</div><div>A column</div><div>A column</div><div>A column</div></div>
but that makes it hard to work with. The alternative of breaking the tags so that it becomes more readable somehow leaves me feeling dirty...
<div>
<div>A column</
div><div>A column</
div><div>A column</
div><div>A column</div>
</div>
I've found a resource or two (I failed to find anything on SO) but I don't really like any of the solutions - they are all workarounds, which I will entertain if I must but surely there's an alternative?
So my question(s)... is there a cross-browser, w3c-compliant, non-javascript, hack-free, tidy HTML, bombproof way of preventing HTML whitespace from being rendered in the browser whilst using display:inline-block? Or is there an alternative to inline-block that can be used that has no unpleasant side effects?
EDIT
Assuming that this is genuinely impossible, the best solution would be something that required no addition HTML markup and 'flexible' CSS. In other words, a webmaster could edit the HTML as normal without consideration of breaking the layout, and the CSS (hacked or otherwise) will accommodate the webmaster's amends without having to be amended itself.
MY "WORKAROUND"
Well, it looks like something's got to give. In my situation it is more important to have HTML that doesn't require extra markup so the best solution is to work in a CSS hack that "just works" invisibly. The solution is to float the nested divs and add a hack...
div div {
float: left;
}
div::before,
div::after {
content: "";
display: table;
}
div::after {
clear: both;
}
div {
*zoom: 1;
}
...which is a derivation of a fix I've been using for some time and was hoping to avoid. This succint version of the fix was found on this site.
So now every single div in the markup has got the clearfix hack applied to it whether it needs it or not. I'm yet to learn if this has any bad side-effects by being applied to all divs - I look forward to debugging and fixing when any problems surface ;-)
You provided nearly all possible solutions to this big layout question. I just want to point out my preferred solution.
Set font-size to the parent to 0 and resetting it again with REM's.
You'll have no trouble with your code and layout if there is no additional text inside the parent div (not the child divs).
REM's (Relative EM's) are not relative to the font-size of the parent elements (like normal EM's are), but relative to the root element of your document – the html element.
HTML:
<div class="parent">
<div class="child">column 1</div>
<div class="child">column 2</div>
<div class="child">column 3</div>
<div class="child">column 4</div>
</div>
CSS:
html {
font-size: 1em;
}
.parent {
font-size: 0;
}
.child {
display: inline-block;
font-size: 16px; /* Add pixel-based font-size to support IE8 and below */
font-size: 1rem; /* Don't use rem along with the font-shorthand to avoid problems in IE9/10 - see note below */
width: 25%;
}
No Browser support:
IE8 and below: Add pixel-based font-size to make it work.
IE9/10: not working with font-shorthand; use font-size instead!
(Opera Mini & iOS 3.2)
is there a ... way of preventing HTML whitespace from being rendered in the browser whilst using display:inline-block?
Yes, there are several ways. None of them really meet your criteria of 'hack-free' and 'tidy', but they do work.
Reformat ('minify') your code so that it doesn't have any white space between the elements.
This is probably the most hack-free and cross-browser solution. It isn't necessarily tidy though, and it means you're fixing your layout by adjusting the HTML rather than the CSS, which isn't ideal. But it does work well. If you want to keep your code readable, you could use HTML comments so you can keep the gaps but without them being in the DOM:
<div>block 1</div><!--
--><div>block 2</div><!--
--><div>block 3</div>
Still not ideal, but more readable than a massive single line of code.
Set the font-size to zero for the container, and back to full size again for the blocks.
This works really well. It's a pure CSS solution and easy to do. The down side is that it can be difficult to work with if you've got relative font sizes (ie setting back to 14px is fine, but setting to 1em won't work because 1em of the previous font size of zero is still zero).
Set a 1em negative margin to close the gap.
This also works pretty well, but can be imprecise.
Or is there an alternative to inline-block that can be used that has no unpleasant side effects?
There's always float:left. But that's got a whole range of different issues of its own. If you're using inline-block, the odds are good it's because you don't want to use floats.
Use position:absolute and do the layout manually.
You can use the float method you described in your question, but you didn't clear your floats, which is why the container collapses.
A good method is to use an ::after pseudo element attache to the container element to "auto-clear" itself:
div:after {
content: "";
display: table;
clear: both;
}
http://jsfiddle.net/s2rJW/3/
When i saw your "workaround" i was thinking: Why don't you use a <table>?
And then i figured this out:
div {
background: #ccc;
display: table;
width: 100%;
}
div div {
background: #eee;
display: table-cell;
width: 25%
}
<div>
<div>A column</div>
<div>A column</div>
<div>A column</div>
<div>A column</div>
</div>

CSS - Header tag with image filling remainder of column

Hopefully the good people at Stackoverflow can help me today - I basically drank far too much beer last night watching the football and my brain has stopped working.
I'm doing a responsive theme, 3 column layout with H2 tags at the top of each. I need to have a background image filling up the remaining space within the column. I've mocked up an image below to demonstrate what I'm on about;
If the background was a block colour I'd probably display the H2 inline and apply the background-colour to that as well, blocking out the image behind it on the containing div.
As you can see though, the mottled background means that technique doesn't work very well, notice the obvious line above the text;
I've been trying all sorts - there must be some clever way of doing this and I hope you can help me!
Thanks for reading!
Robbie.
EDIT Ok, in the end I used a combination of the two answers below, but accepted the answer splitting the header tag into two divs and floating the first left (as I wouldn't have thought of that). It didn't work on it's own, but by giving the left floated div a background the same height as the double lines and tiling it on the x-axis (rather than giving the whole element the background), I was able to cover up the lines under the text without it jarring with the background.
Image:
HTML:
<h2>
<div class="h2-text">Aha!!</div>
<div class="h2-lines"> </div>
</h2>
And CSS;
.h2-text {
padding-right: 5px;
background: url(../images/footer-lines-overlay.png) repeat-x 0 20px;
float: left;
}
.h2-lines{
background: url(../images/footer-h2-lines.png) repeat-x 0 20px;
}
Thanks very much!!
Overshot the Ballmer Peak, I see.
Anyway, one possible solution is to use floating elements:
<h2>
<div style="float: left;">My Header Tag</div>
<div style="background: whatever;"> </div>
</h2>
A simple solution would be done using the following structure:
<h1><div><span>The text</span></div></h1>
Add this style
h1 {
background: url('the-noise-background');
}
h1 div {
background-image: url('the-double-lined-background');
}
h1 div span {
padding-right: 20px;
display: inline-block;
background: url('the-noise-background') -20px -10px /* Fine tune those pixels so it matches the original position */;
/* use required line-height and other stuff to full cover the lines */
}

How to get rid of this sliver of white between DIVs?

I am currently having trouble getting rid of a sliver of white...
Here is an example page: http://m.stackoverflow.quickmediasolutions.com/view_question.php?id=97969&site=serverfault
As you can see, the answers have a sliver of white stuffed between the top of the 'button' and the content.
Here is some relevant code:
<!-- this is the top of the 'button' -->
<div class='top'></div>
<!-- right here is where the space is -->
<div class='content'></div>
.top {
height: 5px;
}
.content {
display: block;
padding-left: 10px;
}
Edit: this problem is fixed now and I will accept the answer below shortly.
This looks like native margin the <p> element has:
.question p { margin: 0 }
A relevant tip here it to use a CSS-Reset, it eliminates most of these oddities and cross-browser compatibility issues.
you know, you'd be surprised how often whitespace breaks layout. I found out the hard way.
Just for $hits and giggles write it out together and see what happens:
<div class='top'></div><div class='content'></div>
and of course I would make sure that in your css you define margin:0px; for both divs

CSS: Floating div to right causes container div to stretch full width of screen in IE

I saw a similar question here, and did not see an answer. I'm having an issue where an element is floated right, inside a parent div, and it's causing the div to stretch the entire width of the page in IE7. This does not happen in any other browsers (Firefox and Chrome). I've also posted pictures after the question, for reference. The HTML I'm using is below:
<div id="journal" class="journalIE">
<div class="title_bar">
<div>
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
</div>
The CSS I'm using for these tags is below as well. One thing I noticed consistent between the other person's question referenced above, and my issue, is that both parent div's have positioning applied (person above has absolute, I have fixed).
#journal
{
z-index: 1;
}
.journalIE
{
right: 1px;
bottom: 18px;
position: fixed;
}
#journal .title_bar
{
background: #F3F3F3;
border: 1px solid #C5D6E8;
color: #363638;
font-size: 11pt;
font-weight: bold;
height: 20px;
padding: 4px;
margin-bottom: 4px;
}
#journal .title_bar .actions
{
float: right;
}
.clear
{
clear: both;
}
Notice that the 'actions' class is floated right. If I take away that float, my box looks like this. But with the float added, it stretches the entire screen, and looks like this. Is this a known IE bug, because it's not happening in any other browser, and it's driving me crazy.
For those wondering, I did have content in the 'actions' div, but have stripped away everything down to the root problem.
Any assistance would be greatly appreciated. Thanks very much.
You need a width: *A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). *
via: W3C
Do this
<div id="journal" class="journalIE">
<div class="title_bar">
<div class="Test">
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
and then add a Css class
.Test
{
float:right;
}
should do it, let us know if it does not work.
MNK
I'm not entirely sure what you want, as you didn't explain what you wanted to do with the "actions" div, but if you wanted the "actions" div to float right next to the "Testing" div, I just tried making a separate .floatr class, or it will also work if you just apply style directly to div.
.floatr {
float: right;
}
with .floatr class, apply that to "actions" div:
<div class="actions floatr"></div>
I don't know why, but it seems to me that "actions" div is ignoring the float setting in the class you set in that manner. I personally prefer to apply multiple classes to divs, which allows me to reuse that class over other divs for which I want that effect, but I've heard that some browsers will ignore any classes declared after the first one. Oh well, I haven't run into that problem yet with major browsers...
Oh wait.
I looked over code again, and I think you just had a problem with how you set your classes. Your "actions" div was missing out on the action, try adding a comma to CSS:
#journal .title_bar, .actions
{
float: right;
}
I guess sometimes to figure something out you gotta apply effect directly to make sure it can behave in the manner you expect it to, and then probably figure it's some sorta syntax error if it does work. heh.

Resources