I have 2 div<> that I would like to be next to eachother. They are inside of a form<>. The one I have on the left won't float all the way up. It seems that my First Div keeps blocking it. I have resized it multiple times and It still doesn't work. Here is my Css code and as you can see there is not much to it. I also have no inline styling. My first Div is called ContactInput and my second Div is called invisible
#body {
border: 1px double black;
}
#checkout { //this is just a head at the top
text-align:left;
border-bottom: 1px solid black;
}
#contactInput{
clear:right;
padding:.5em;
}
#invisible{
float:right;
padding:.5em;
}
Like this?
#contact {
width: 50%;
padding:.5em;
background: blue;
float: left;
box-sizing: border-box;
}
#invisible {
width: 50%;
padding:.5em;
background: red;
float: left;
box-sizing: border-box;
}
<div id="contact">
</div>
<div id="invisible">
</div>
I recommend flex instead of float
.wrap {
display: flex;
}
#contact {
flex: 1;
padding:.5em;
background: blue;
}
#invisible {
flex: 1;
padding:.5em;
background: red;
}
<div class="wrap">
<div id="contact">
</div>
<div id="invisible">
</div>
</div>
Related
Let's say I have a <div> with 10 floating elements inside:
<div>
<div class=floatme>...</div>
<div class=floatme>...</div>
...(8 more)
</div>
Depending on the horizontal space available, some of them will wrap to consecutive lines.
Q: How can I, say, style the ones on the second line?
<style>
.floatme {
float: left;
}
.floatme:if-wrapped-to-nth-line(2) {
background: url("rainbows.png");
}
</style>
.app {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background: #bbb;
animation: 2s ease-in-out infinite alternate woosh;
}
.app, button {
font-family: sans-serif;
}
.tabs {
border-bottom: 2px solid #039;
}
.tabs button {
background: #039;
color: white;
border: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.toolbar {
background: white;
}
.toolbar > div {
padding: 3px;
float: left;
border-right: 2px solid #bbb;
}
.toolbar > .right {
float: right;
border-right: 0;
}
.toolbar button {
border: 2px solid #777;
}
.toolbar button:hover {
background: #bbb;
}
.toolbar::after {
display: table;
content: '';
clear: both;
}
#keyframes woosh {
from {
width: 300px;
}
to {
width: 500px;
}
}
<div class=app>
<nav class=tabs>
<button>Tab 1</button>
</nav>
<nav class=toolbar>
<div>
<button>A</button>
<button>B</button>
</div>
<div class=right>
<button>Right</button>
<button>side</button>
</div>
<div>
<button>C</button>
Description
</div>
<div>
<button>D</button>
<button>E</button>
<button>F</button>
</div>
<div>
<strong>Q</strong>: How to style second line?
<button>G</button>
</div>
<div>
<button>H</button>
<button>I</button>
Etc etc...
</div>
</nav>
</div>
You can give the element class name and don't try using nth-child() a lot because it's bad performance.
<div>
<div class=floatme one>...</div>
<div class=floatme two>...</div>
...(8 more)
</div>
Also you can use same idea to create gallery image using CSS Grid layout and BEM methodology.
CSS Grid Layout:
https://www.youtube.com/watch?v=jV8B24rSN5o&t=930s
BEM:
https://www.toptal.com/css/introduction-to-bem-methodology.
Code
<div style="width:10px;height:10px;border:1px solid #F00;background:red;"></div>
<p>Red</p>
<div style="width:10px;height:10px;border:1px solid #00F;background:blue;"></div>
<p>Blue</p>
In the above code I expect two square box followed by the color name in different line. But it gives the box in one line and the para in
another line. How to achieve this in the same line like
[] Red
[] Blue
For a quick fix just add this to your CSS:
p,div{
display: inline-block;
}
This way will change properties of all your div and p elements.
Usually you would assaign classes to elements so you can target them from one place and only target them.
Try the following solution:
div {
display:inline-block;
width:10px;
height:10px;
border:1px solid #F00;
margin-right:5px;
}
p {
display:inline;
}
p:after {
content:"\A";
white-space:pre;
}
<div style="background:red;"></div><p>Red</p>
<div style="background:blue;"></div><p>Blue</p>
Hint: I would wrap these items to avoid overwriting the CSS of other <p> and <div> items, like the following:
.legend div {
display:inline-block;
width:10px;
height:10px;
border:1px solid #F00;
margin-right:5px;
}
.legend p {
display:inline;
}
.legend p:after {
content:"\A";
white-space:pre;
}
<div class="legend">
<div style="background:red;"></div><p>Red</p>
<div style="background:blue;"></div><p>Blue</p>
</div>
<div>line #1 (with div).</div>
<p>line #2 (with p).</p>
you can achieve this in so many ways, here is one:
inline-block
div {
width: 10px;
height: 10px;
border: 1px solid #F00;
}
div:first-of-type {
background: red
}
div:nth-of-type(2) {
background: blue
}
div,
p {
display: inline-block
}
<div></div>
<p>Red</p>
<div></div>
<p>Blue</p>
using span (which is an inline element)
div {
width: 10px;
height: 10px;
border: 1px solid #F00;
}
div:first-of-type {
background: red
}
div:nth-of-type(2) {
background: blue
}
div {
display: inline-block
}
<div></div>
<span>Red</span>
<div></div>
<span>Blue</span>
using pseudo-element ::before
span {
position: relative;
padding-left:15px
}
span::before {
width: 10px;
height: 10px;
border: 1px solid #F00;
content: '';
position: absolute;
left: 0;
top:3px
}
span:first-of-type::before {
background: red
}
span:nth-of-type(2)::before {
background: blue
}
<span>Red</span>
<span>Blue</span>
I want to use the table-cell to make a two-col layout. the content in the inner table has no relationship with the outer table.
My problem is the menu in the left-col will keep in line with the content in the inner- table-cell(the inner-left-head and inner-right-head). How can I stop it?
.wrap {border: 1px solid #ddd;}
.left-col,
.right-col
{
display:table-cell;
}
.left-col {
border-right: 1px solid #ddd;
width:17.5%;
max-width:209px;
}
.right-col {width:2000px;}
.right-col-main {
margin: 30px;
border: 1px solid #ddd;
}
.inner-left-col,
.inner-right-col {
display: table-cell;
height:300px;
}
.inner-left-col {
width:100px;
border-right: 1px solid #ddd;
}
.inner-right-col {
width: 500px;
}
.inner-left-head,
.inner-right-head {
height:48px;
line-height:48px;
border-bottom: 1px solid #ddd;
}
<div class="wrap">
<div class="left-col">
<dl>
<dt>menu<dt>
<dd>sub1<dd>
<dd>sub2<dd>
<dd>sub3<dd>
</dl>
</div>
<div class="right-col">
<div class="right-col-main">
<div class="inner-left-col">
<div class="inner-left-head">left head</div>
<div class="inner-left-body">left body</div>
</div>
<div class="inner-right-col">
<div class="inner-right-head">right head</div>
<div class="inner-right-body">right body</div>
</div>
</div>
</div>
</div>
I tried use table-row to wrap the table-cell but I can't see any difference.
Thanks for editing. It's starting to become clear now. You want to be able to scroll the right column while keeping the left column in sight. Then my question is, why did you make this table layout?
I think you're looking for position: fixed to fixate the left column to the top left corner. You can position the right column by just giving it a left margin.
So the styling for the left and right columns becomes:
.left-col {
position: fixed;
width: 17.5%;
top: 0;
left: 0;
}
.right-col
{
margin-left: 17.5%; /* Same or larger as width of left colum */
height: 2000px; /* Force some height to see the effect.
}
.wrap {border: 1px solid #ddd;}
.left-col {
position: fixed;
width: 17.5%;
top: 0;
left: 0;
}
.right-col
{
margin-left: 17.5%; /* Same or larger as width of left colum */
height: 2000px; /* Force some height to see the effect.
}
.right-col-main {
margin: 30px;
border: 1px solid #ddd;
}
.inner-left-col,
.inner-right-col {
display: table-cell;
height:300px;
}
.inner-left-col {
width:100px;
border-right: 1px solid #ddd;
}
.inner-right-col {
width: 500px;
}
.inner-left-head,
.inner-right-head {
height:48px;
line-height:48px;
border-bottom: 1px solid #ddd;
}
<div class="wrap">
<div class="left-col">
<dl>
<dt>menu<dt>
<dd>sub1<dd>
<dd>sub2<dd>
<dd>sub3<dd>
</dl>
</div>
<div class="right-col">
<div class="right-col-main">
<div class="inner-left-col">
<div class="inner-left-head">left head</div>
<div class="inner-left-body">left body</div>
</div>
<div class="inner-right-col">
<div class="inner-right-head">right head</div>
<div class="inner-right-body">right body</div>
</div>
</div>
</div>
</div>
Instead of using table-cells you could use floats. Combined with relative width settings you will furthermore have a more responsive solution.
This is just one example how it could be working:
.left-col,
.right-col {
float:left;
}
.left-col {
background:#abc;
width:17.5%;
}
.right-col {
background:#aed;
width:82.5%;
}
.right-col-main {
margin-top:40px;
}
.inner-left-col,
.inner-right-col {
float:left;
}
.inner-left-col {
width:20%;
}
.inner-right-col {
width:80%;
}
http://jsfiddle.net/xn0zuo7h/
I have 3 nav buttons at the top of a page. I set their width to 33% but noticed that the last one didn't fill all the space that it was supposed to, so I set it's width to 34% but it still didn't fix the issue.
If you go to http://shacktown.com and hover over Contact you will see that the right-most area of the button does not turn a lighter gray, and I also noticed that the border-radius attribute doesn't apply itself either.
The 3 .nav items are located inside of a #header item. Here is the respective CSS:
#banner, #header, #content {
margin: 2.5% 15% 2.5% 15%;
}
#header, #content {
border-radius: 0.375em;
background-image: url('http://shacktown.com/engine/img/trans.png');
}
.nav {
height: 2em;
padding-top: 1.0em;
text-align: center;
color: #000000;
font-size: 1.2em;
float: left;
width: 33%;
cursor: pointer;
border-left: 0.1em solid #333333;
}
.nav:hover, .navSelected {
background-image: url('http://shacktown.com/engine/img/trans.png');
}
.navSelected {
cursor: default;
}
.nav:first-of-type {
border-radius: 0.375em 0 0 0.375em;
border-left: none;
}
.nav:last-of-type {
border-radius: 0 0.375em 0.375em 0;
width: 34%;
}
Any idea why it isn't filling up the whole space?
:last-of-type or :first-of-type css selectors are not meant to be working like this. In your case, this selectors will select the last "div" or first "div" in their parents.
So remove this line from html:
<div style="clear: both;"></div>
and change width of the class nav to %33.3
these will do the trick.
Change the rule for .nav to following:
.nav {
height: 2em;
padding: 1em 0 2.5em 0;
text-align: center;
color: #000;
font-size: 1.2em;
float: left;
cursor: pointer;
border-left: 0.1em solid #565656;
width: 33.33%;
box-sizing: border-box;
}
And add a new rule:
.nav:last-of-type:hover {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Remove the whitespace in your markup:
And this is the result you'll get.
there is no selector with only class only
CSS: How to say .class:last-of-type [classes, not elements!]
so you can do
set .nav as display:inline-block and remove clear div so that they are inline
here is the demo
.cont {
font-size: 0px; /* is added to remove whitespace from inline-block */
}
.cont div {
display: inline-block;
font-size: 16px;
}
.cont div:first-of-type,
.float div.test:first-of-type {
background: red;
}
.cont div:last-of-type,
.float div.test:last-of-type {
background: red;
}
.float .test {
float: left;
}
.float .clear {
clear: both;
}
<p>used inline-block instead of float</p>
<div class="cont">
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
</div>
<p>with class and used float</p>
<div class="float">
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="clear"></div>
</div>
I have a side by side 50% divs. Under I have a content div where I have applied a margin-top 60px. That margin is not working.
<div class="sbs50">
Left Side
</div>
<div class="sbs50">
Right Side
</div>
<div class="content-section">
Content Section
</div>
Css
.sbs50
{
float: left;
width: 50%;
}
.content-section
{
margin-top: 60px;
border: 1px solid green;
}
I tried adding the following but is not working
.sbs50:after
{
content:'';
display:block;
clear: both;
}
How can I fix the margin not working?
Here is my fiddle
Just add the margin to the bottom of the sbs50 class and clear the floats for .content-section class. Like this:
.sbs50 {
float: left;
width: 50%;
margin-bottom:50px;
}
.content-section {
border: 1px solid green;
display:block;
clear: both;
float:none;
background:#ccc;
}
See fiddle
Alternative:
Use the typical clear method, basically you add a div which clears every float. So your HTML looks like this:
<div class="sbs50">Left Side</div>
<div class="sbs50">Right Side</div>
<div class="clearfix"></div><!-- added div -->
<div class="content-section">Content Section</div>
and your CSS like this:
.sbs50 {
float: left;
width: 50%;
}
.clearfix {
display:block;
clear: both;
float:none;
}
.content-section {
border: 1px solid green;
margin-top:200px;
background:#ccc;
}
See fiddle for this example
This is a more common approach since you simply clear elements and then style the subsequent elements as you wish, but you can use any of these approaches and they will work equally well
This works:
.content-section {
margin-top: 20px;
border: 1px solid green;
float: left;
width: 100%;
}
but I am not sure if you want to set the width yourself.