Ok, so I have this fiddle: http://jsfiddle.net/Rae9m/
And as you can see, the menu at the top doesn't want to stick to the margin top as expected. Here's my HTML:
<div class="container">
<div class="menu">
<div class="item">Page</div>
<div class="item">Page</div>
<div class="item">Page</div>
<div class="item">Page</div>
</div>
<h2>Blue Beat</h2>
<div class="desc">
<em style="color: #00F7FF">Blue Beat - Featuring Electric Blue Color</em>
</div>
</div>
And CSS is quite big so I'll put the important part here:
.menu {
width: 1000px;
}
.menu:last-child {
float: clear;
}
.item {
width: 250px;
height: 50px;
float: left;
background-color: #00F7FF;
transition: background-color 1s;
}
.item:hover {
transition: background-color 1s;
background-color: #fff;
}
Any ideas for why this doesn't work ? I tried it all, margin-top: 0 for body, menu, container divs and so on, still not working, it's very frustrating.
It it the <h2> that is giving you this space. Default h2
Css:
h2 {margin:0;}
Updated JsFiddle
You are not clearing your floats in the .menu properly.
If you change
.menu:last-child {
float: clear;
}
to
.menu:after {
content: "";
display: table;
clear: both;
}
or similar, you can keep the margin on your headings without them spilling out of the container. http://jsfiddle.net/Rae9m/6/
Related
I was working on a project for my college using Bootstrap CSS and I am stuck with fixing some alignment issues. What I wanted to achieve is align logo to the left(acquiring 35% of width) and aligning social plugin and Sign Up & Sign In button to the right(acquiring the leftover space i.e. 65%).
The issue I am facing right now is everything is aligned vertically! What I've coded so far is mentioned below. Would appreciate if someone fixes bug in my code rather than coming up with a new one.
Here is the HTML:
<div class="container">
<div id="topBar">
<div class="topLeft">Logo</div>
<div class="topRight">
<div class="socialPlugin">f t g</div>
<div class="signUpIn">Sign Up/In</div>
</div>
</div>
</div>
Here is the CSS:
#topBar {
width: 100%;
}
#topBar .topLeft {
width: 35%;
}
#topBar .topRight {
width: 65%;
}
#topBar .topRight .socialPlugin {
float: left;
}
#topBar. topRighht .signUpIn {
float: right;
}
Demo
Thank you
Leaving aside the fact that Bootstrap is not being used most of what you want can be solved by correctly applying float and clearing floats as necessary.
#topBar {
width: 100%;
overflow: hidden;
/* quick clearfix */
}
#topBar .topLeft {
width: 35%;
float: left;
background: lightblue;
}
#topBar .topRight {
width: 65%;
background: #bada55;
float: left;
}
#topBar .topRight .socialPlugin {
float: left;
width:50%;
}
#topBar. topRighht .signUpIn {
float: right;
width:50%;
}
<div class="container">
<div id="topBar">
<div class="topLeft">Logo</div>
<div class="topRight">
<div class="socialPlugin">f t g</div>
<div class="signUpIn">Sign Up/In</div>
</div>
</div>
</div>
It looks like for the most part you've just got a typo in the last selector of your css:
Change #topBar. topRighht .signUpIn to #topBar .topRight .signUpIn, which I did to your fiddle.
Let's assume I have a collapsible fixed-width sidebar defined like this:
HTML
<div class="container">
<div class="sidebar" id="sidebar">
SIDEBAR
</div>
<div class="content">
lorem bla bla
<button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')">
toggle Sidebar
</button>
</div>
</div>
CSS
body {
margin:0;
}
.container {
display: flex;
min-height:100px;
}
.sidebar {
position: relative;
left: 0;
width: 200px;
background-color: #ccc;
transition: all .25s;
}
.sidebar.collapsed {
left:-200px;
margin-right:-200px;
}
Codepen here: http://codepen.io/anon/pen/pJRYJb
So here's the question:
How can I go from there to a flexible-width sidebar?
Here are the constraints:
no javascript (I want the browser to deal with the layouting – not me)
the sidebar must not overlap the content
when collapsed, the sidebar's right border needs to be aligned with the window's left border (to be able to attach an absolutely positioned tab on the right side that's always visible)
the width of the sidebar shouldn't change if collapsed to avoid reflows during the transition
smooth transition without any sudden jumps
modern CSS (flexboxes, calc) is fine
The main issue here is that I can't find a way to say margin-right: -100% where 100% refers to the width of sidebar
Any help will be greatly appreciated!
How about changing the width instead of position on click? I use max-width in this case, it works almost the same as unknown width. This will probably cause the content reflow on the sidebar, so use white-space:nowrap if it's acceptable.
http://jsfiddle.net/dn4ge901/
body {
margin: 0;
}
.container {
display: flex;
}
.sidebar {
background: #ccc;
transition: all .1s;
max-width: 1000px;
}
.sidebar.collapsed {
max-width: 0;
overflow: hidden;
}
<div class="container">
<div class="sidebar" id="sidebar">SIDEBAR</div>
<div class="content">lorem bla bla
<button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')">toggle Sidebar</button>
</div>
</div>
Another workaround is using transform width position together, but the animation effect will be slightly different.
http://jsfiddle.net/vkhyp960/
body {
margin: 0;
}
.container {
display: flex;
}
.sidebar {
background: #ccc;
transition: all .1s;
}
.sidebar.collapsed {
transform: translateX(-100%);
position: absolute;
}
<div class="container">
<div class="sidebar" id="sidebar">
<div>SIDEBAR</div>
</div>
<div class="content">lorem bla bla
<button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')">toggle Sidebar</button>
</div>
</div>
Piggy-backing off Pangloss' suggestion re: the transform... you can just apply a negative margin to the content if you know the width of the sidebar. No need to have the sidebar switch to absolute positioning.
#mixin transitionAll() {
transition: all .3s ease-out;
}
html, body {
height: 100%;
}
.container {
display: flex;
width: 100%;
height: 100%;
}
.sidebar {
flex: 1 0 300px;
background: #333;
height: 100%;
#include transitionAll();
&.is-collapsed {
transform: translateX(-100%);
}
}
.content {
width: 100%;
height: 100%;
padding: 1rem;
background: #999;
#include transitionAll();
&.is-full-width {
margin-left: -300px;
}
}
--
<div class="container">
<aside class="sidebar">
</aside>
<section class="content">
<button class="btn btn-primary">Toggle</button>
</section>
</div>
--
$(function() {
$('.btn').on('click', function() {
$('.sidebar').toggleClass('is-collapsed');
$('.content').toggleClass('is-full-width');
});
});
See the Pen LxRYQB by Jason Florence (#JFlo) on CodePen.
For what it's worth, I do have a partly js solution. The animation itself is done entirely with CSS, it just resolves the width:auto problem. You just set the width of the sidebar domElement with js, when the element is loaded:
domElement.style.width = `${parseInt(domElement.offsetWidth)}px`;
This resolves the 'unknown' width problem. And you can use your .collapsed approach just as you like to do. The only adjustment is that you'll need to add !important to the .collapsed {width: 300px !important;} width value.
I have a very simple design where I have 4 small boxes lined up on top of one another each with the same dimensions. However, when I try to apply "float: left" to the boxes, the background color of it's parent div goes away. Why is this? What does it have to do with the background color? I would just like my background color to remain the same.
See jsfiddle: http://jsfiddle.net/mush5ecc/
My html code:
<div id="careers">
<div class="container">
<h2 id="careers_title">Careers</h2>
<div id="four_grids">
<div id="top_left" class="grid"></div>
<div id="top_right" class="grid"></div>
<div id="bottom_left" class="grid"></div>
<div id="bottom_right" class="grid"></div>
</div>
</div>
</div>
My CSS code:
#careers {
background-color: orange;
}
.container {
width: 1026px;
margin: auto;
}
#careers_title {
text-align: center;
padding-top: 67px;
padding-bottom: 60px;
}
.grid {
width: 50px;
height: 50px;
float: left; /* COMMENT FLOAT TO SEE WHAT HAPPENS */
}
#top_left {
background-color: blue;
}
#top_right {
background-color: green;
}
#bottom_left {
background-color: red;
}
#bottom_right {
background-color: yellow;
}
Apply overflow: hidden to <div id="four_grids">.
See here for further details on this behaviour.
I'm a bit unsure of what your goal is, but I added the following css and I think this may be what you are looking for.
#four_grids {
position: absolute;
}
I have a header/ container with no specified width (therefore it's as long as the parent). Inside that, I have two smaller divs. Now, the first one should only contain a picture (with a set size), and the other should be as big as there's space left. I can't use a set width, because I don't know the width of the header.
How do I do this with pure CSS?
What I want ultimately is a picture, then some text aligned to the right top, and then some text aligned with the bottom of the picture on the left.
Do you know of any better way to do this?
Here's a picture so it's easier to understand:
Thanks, Aleksander
EDIT 1:
HTML:
<div class="header">
<div class="header_left">
<div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div>
</div>
<div class="header_right">
<div class="time">18m ago</div>
<div class="name">Volkswagen</div>
</div>
</div>
CSS:
.header {
}
.header_left {
display: inline-block;
}
.pic {
margin: 5px;
}
.header_right {
display: inline-block;
}
.time {
margin: 5px;
float: right;
}
.name {
margin: 5px;
float:left;
}
It's kinda' messy right now, because what I've just been trying a lot of stuff, and this is the last thing.
It would be easier if you displayed your html. Here's an example based on your description. You can see this working in the fiddle here
http://jsfiddle.net/Z68ds/18/
.header {
overflow:hidden;
padding: 4px;
background: #ddd;
}
.caption {
float: right;
font-size: 0.9em;
}
.avatar {
float: left;
}
.title {
margin: 14px 0 0 38px;
}
<div class="header">
<div class="caption">
texty text2
</div>
<img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" />
<div class="title">texty text1</div>
</div>
You have to use overflow in the element you don't want to set a width without floating it.
#left {
float: left;
width: 100px;
}
#right {
overflow: hidden;
}
This will force the #right element to cover the rest of its parent. No extra markup needed.
Is this what you want to achive?
<div id="header">
<img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
<p id="textRight">texty text2</p>
<p id="textLeft">texty text1</p>
<div class="clearer"></div>
</div>
/* CSS */
#logo {
float: left;
}
#textRight {
float: right;
}
#textLeft {
clear: right;
float: left;
}
.clearer {
clear: both;
}
Here is a fiddle:
http://jsfiddle.net/T26cD/
I am making a web page that needs a header (on top) and a left aligned menu (below the header) and content to the right of that menu.
The problem I am facing is that I want to use (with elements and floats) rather than to create the struture of the page however, whenever I resize the browser window the content element floats down under the menu. I want the content to stick to the right of the left floating menu.
Any one got any ideas how I can fix this?
my html code has this structure:
<div id="menu">
menu #1
...
...
...
</div>
<div id="subcontent">
text or whatnot...
</div>
Css file look like this:
#menu
{
width: 200px;
float: left;
}
#subcontent
{
width: 800px;
float: left;
}
PS I have tried changing pixels to % but with no luck.
CSS
#layout {
min-width: 1001px;
}
#menu {
width: 200px;
float: left;
}
#subcontent {
width: 800px;
float: left;
}
.clear-both {
clear: both;
font: 1px/1px monospace;
display: block;
}
HTML
<div id="layout">
<div id="menu"> menu #1 ...
...
... </div>
<div id="subcontent"> text or whatnot... </div>
<div class="clear-both"></div>
</div>
Another solution:
CSS
#layout {
display: table;
width: 1000px; /* set it to 100% if #subcontent width is dynamic */
}
#menu {
width: 200px;
display: table-cell;
}
#subcontent {
width: 800px; /* you can remove the width to make it dynamic */
display: table-cell;
}
HTML
<div id="layout">
<div id="menu"> menu #1 ...
...
... </div>
<div id="subcontent"> text or whatnot... </div>
</div>
You will need an outer container.
Simply try wrapping both elements in a div of width 1000px
<div class="outer">
<div id="menu">
menu #1
</div>
<div id="subcontent">
</div>
</div>
.outer{width: 1000px;}
#menu
{
width: 200px;
float: left;
}
#subcontent
{
vertical-align: top;
width: 800px;
float: left;
}