I cant get these two pieces of content to display next to each other. I never had any problems with displaying content this way before so would appreciate any help available
HTML
<div class="block-one">
<h3>Block 1</h3>
<ol>
<li>One</li>
</ol>
</div>
<div class="clear-div"></div>
<div class="block-two">
<div class="block-two-title">Block 2</div>
<div class="thumb-title">
<img src="images/example.jpg" width=155 height=130 />
<h4>Title</h4>
<p>Description</p>
</div>
<div class="thumb-title">
<img src="images/example.jpg"width=155 height=130 />
<h4>Title</h4>
<p>Description</p>
</div>
<div class="thumb-title">
<img src="images/example.jpg"width=155 height=130 />
<h4>Title</h4>
<p>Description</p>
</div>
CSS
.popular-games { float:left }
.latest-screenshots img{ display:inline-block}
.thumb-title{display: inline-block}`
Here is your fiddle. You cannot get those two blocks to display next to each other because you have a clearing div between them. If you remove it and float both blocks, you will get the desired result, like here
<div class="block-one">
<h3>Block 1</h3>
<ol>
<li>One</li>
</ol>
</div>
<!-- remove this one <div class="clear-div"></div> -->
<div class="block-two">
[…]
Just add these CSS rules:
html, body { height: 100%; }
body > div {
float: left;
}
Here is the Jsfiddle: DEMO
Related
Here is a codesandbox of what I have: https://codesandbox.io/s/still-surf-5vyy2
The pink square is stickied the way I want to but now I need to add a container so that the content doesnt stretch through the whole page.
THis is what the html looks like now:
<body>
<div style="height:200vh;background-color:blue">
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
If I were to add:
<body>
<div style="height:200vh;background-color:blue">
<div class='container'> <--------------------------THIS
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
</div>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
It breaks the sticky. Does anyone have a better solution for this?
Really appreciate the help.
Your container div has no height. please add that rule to 100% in your css:
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
height: 100%;
}
I am basically trying to align text within a div element to format an interactive SI unit chart. I want to create two columns of content on the left and right side of the divide. The left has prefixes (centi-, milli-, etc.) and the right has their corresponding values (10^-2, 10^-3 etc.). When hovering cursor over an element in the chart, I want that entire horizontal section of the chart to change in background color (so the horizontal section with both centi- and 10^-2 for example). I tried subdividing the div element but was unsuccessful because the columns will not align properly and the prefix and its corresponding value are on different lines. An example of the code is below. Help
<body>
<style>
.hover:hover {
background-color:yellow;
}
</style>
<div style="with:300px;border:solid;position:absolute;margin-left:100px;margin-top:200px;">
<div class="hover">
<div style="width:100px;text-align:left">
centi-
</div>
<div style="width:100px;text-align:right">
10^-2
</div>
</div>
<div class="hover">
<div style="width:100px;text-align:left">
milli-
</div>
<div style="width:100px;text-align:right">
10^-3
</div>
</div>
<div class="hover">
<div style="width:100px;text-align:left">
micro-
</div>
<div style="width:100px;text-align:right">
10^-6
</div>
</div>
</div>
</body>
.hover div {
display: inline-block
}
.hover:hover {
background-color: yellow;
}
<div style="with:300px;border:1px solid;">
<div class="hover">
<div style="width:100px;text-align:left">
centi-
</div>
<div style="width:100px;text-align:right">
10^-2
</div>
</div>
<div class="hover">
<div style="width:100px;text-align:left">
milli-
</div>
<div style="width:100px;text-align:right">
10^-3
</div>
</div>
<div class="hover">
<div style="width:100px;text-align:left">
micro-
</div>
<div style="width:100px;text-align:right">
10^-6
</div>
</div>
</div>
Div has display:block by default. Make those divs display:inline-block.
I have some HTML, generated by Drupal and Views Slideshow, that (generally) looks like:
<div id="banner">
<div id="image1" class="hidden"> Image .. </div>
<div id="text1" class="hidden"> Text .. </div>
<div id="image2" class="active"> Image .. </div>
<div id="text2" class="active"> Text .. </div>
</div>
<div id="counter">
<div class="item1 hidden">1</div>
<div class="item2 active">2</div>
</div>
</div>
The content of #banner (the image and text) rotates periodically, and the content of #counter displays a bullet image identifying the active image, which is selected by adding and removing CSS to each #counter child in turn. The output is a bit similar to http://www.slidesjs.com/, except with the added line of text.
I am omitting the actual CSS and HTML because it's rather verbose.
I am trying to display the contents of #counter inline (which I can do with #counter .item { float: left }), then position it next to #text.
I'm not able to position #content next to #text, and if possible, only through CSS.
Hopefully that's clear-ish. I'm having a hard time putting this into words.
Any help or direction is appreciated.
Is this what you're looking for? If not, could you provide an example image of what you're looking for.
.wrapper {
width: 100%;
}
#banner {
width: 50%;
float: left;
}
#counter {
width: 50%;
float: left;
}
<div class="wrapper">
<div id="banner">
<div id="image1" class="hidden"> Image .. </div>
<div id="text1" class="hidden"> Text .. </div>
<div id="image2" class="active"> Image .. </div>
<div id="text2" class="active"> Text .. </div>
</div>
<div id="counter">
<div class="item1 hidden">1</div>
<div class="item2 active">2</div>
</div>
</div>
Once between the div tags, an HTML tag (eg headings, breaks), the contents are no longer align the same. Example: Html.DisplayFor (...) should end always justified. How can this be fixed?
<div class="table">
<div class="row">
<div class="cell">
<h3>Heading 1</h3>
<hr />
<div class="row">
<div class="cell">Label 1</div>
<div class="cell">Html.DisplayFor(...)</div>
</div>
<div class="row">
<div class="cell">Label 2 with much more Text</div>
<div class="cell">Html.DisplayFor(...)</div>
</div>
<br />
<h3>Heading 2</h3>
<hr />
<div class="row">
<div class="cell">Label 3 with Text</div>
<div class="cell">Html.TextBoxFor(...)</div>
</div>
</div>
<div class="cell">
...
</div>
</div>
</div>
CSS:
div .table {
display: table;
width: 100%;
}
div .cell {
display: table-cell;
padding: 0.3em;
}
div .row {
display: table-row;
}
It should actually look more like this (red line):
Its because you break the flow of the layout by not adhering to only using a table->row/cell structure but by injecting div and hr elements in the middle of it.
You could simply add a width to the first column:
.row .cell .row .cell:first-child{
width:200px;
}
Demo Fiddle
Sometimes, HTML/CSS just drives me crazy ;( ... Hopefully someone can explain this behavior and maybe how to fix it.
See HTML/CSS below or this sample JSFiddle
So what I'm doing is having a header and body div, both with floating divs inside, and using clear: both; so the container div spans over the floating inner divs. In my real code I use a more complex clearfix class, but the problem is the same.
The body has a foregrond color BLUE. For the header-div, I set a foreground of WHITE. What drives me crazy is that the foreground-color gets also applied to the body-div even if it is not contained within the header-div. How can this happen?
In my real code I have even a problem that when I explicitely set the foreground for the body-div to BLUE, the color in the header-div also switches to blue. I cannot reproduce it with this JSFiddle but if I understand this problem I can reproduce in this sample code here, maybe I also understand the other problem :)
HTML:
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" />
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>
CSS:
body {
color: blue;
}
div#head {
background-color: gray;
width: 400px;
color: white;
}
div#body {
background-color: lightgray;
}
.headleft {
float: left;
}
.headright {
float: right;
}
.feature
{
float: left;
margin-right: 10px;
}
Thanks for any help understanding this issue!
EDIT
Sorry by editing the pasted code I messed up the sample and removed a closing DIV. I corrected this now, the issue was not the missing closing DIV.
You forgot the closing tag on the head div.
http://jsfiddle.net/UHXr6/2/
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" /></div>
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>
The problem with your HTML was that you were incorrectly closing the div tags. You can't close div's like this: <div/>. You must use <div></div>. Please see this working Fiddle.
You are missing a closing <div> for head
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" /></div>
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>