Basically, I don't understand why the isn't at the top right? It positions itself at the bottom, even though by my understanding it should be on the top right?
See JSfiddle for detailed code
http://jsfiddle.net/5JhMj/
#content section {
padding: 4%;
width: 70%;
float: left;
background-color: white;
margin-bottom:8%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
aside {
width: 30%;
float: right;
background-color: green;
}
You are floating your sidebar around your last section element.
Instead of this, wrap your sections around another container which you float. Then let your sidebar float aside that new container.
<div class="container">
<div class="section-container">
<section>...</section>
</div>
<aside>
...
</aside>
</div>
CSS
.section-container{
width: 70%;
float: left;
}
aside {
width: 29%;
float: right;
background-color: green;
}
Fiddle:
http://jsfiddle.net/5JhMj/2/
Simple solution is put your aside before section
like
<div class="container">
<aside>
<h1>placeholder</h1>
</aside>
<section>
...
...
Working Fiddle
Related
First of all, please look at this code.
I learned that this was a common way to realize liquid layout.
But I can not understand some of this code.
.container {
overflow: hidden;
}
main {
float: left;
width: 100%;
margin-right: -340px;
background: red;
}
.main-inner {
margin-right: 340px;
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
Question 1
I understand that the negative margin has the effect of moving an element in the specified direction. However, when you run this code, the main element does not seem to be moving at all. Why is this?
Question 2
Since we set the width of the main element to 100%, I understand that the aside element hits the main element and that the main element and aside element can not be side by side.
So, I think that we prepare a horizontal width that can apply the aside element by applying negative margin, but the background color of the main element is applied in the same way as when the horizontal width is 100%. Why is the background color of the main element not (100% - aside width)? How is this series of rendering done?
Question 3
Which document on W3.org describes these actions? I tried looking, but I could not find any detailed information on them.
thank you.
Let's start by adding the properties one by one and see what is happening.
Intially we have this code with no margin applied and only float elements:
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
}
.main-inner {
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
It's clear that you made the red element to be width:100% floating on the left and the green one to float on the right with a fixed width. You may also notice that p element is having a default margin that's why the blue is not totally covering the red.
Now if you add negative margin-right you will not move the element or decrease the width but you will pull the content from the right in order to overlap the element. Here is a basic illustration:
.box {
width: 200px;
height: 200px;
background: red;
float: left;
}
<div class="box" style="margin-right:-100px;height:220px">
</div>
<div class="box" style="background:blue;">
</div>
As you can see the blue box is overlapping the red one by exactly 100px because we applied -100px to the margin-right of the red box. Same logic will happen in your case, you applied a negative margin equal to the size of the sidebar so you created the need space to move the sidebar at the same level of the main element.
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
margin-right:-340px;
}
.main-inner {
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
So the main element is still 100% width BUT the sidebar is overlapping it due to negative margin.
Now the last step is to add the margin inside the main and in this case it will reduce the width of the inner element to make the total (width + margin) always equal to the width of parent element (containing block)
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
margin-right:-340px;
}
.main-inner {
background: blue;
margin-right:340px;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
Here is another illustration of margin with block element non floated:
.container {
border: 2px solid;
max-width: 50vw;
margin: auto;
}
.first {
height: 100px;
background: red;
margin: 0 -50px;
}
.second {
height: 100px;
background: blue;
margin: 0 50px;
}
<div class="container">
<div class="first">
</div>
<div class="second">
</div>
</div>
In this case the width is increasing/decrasing due to margin because the logic is always: width + margin = width of containing block.
With elements like float and inline block the logic is the same but we won't have width changes because the width is defined either by the content or explicitly.
.container {
border: 2px solid;
display:inline-block;
}
.first {
float:left;
height: 100px;
background: red;
margin-right:-50px;
}
.second {
display:inline-block;
width:200px;
height: 120px;
background: blue;
margin-top:20px;
margin-right:-100px;
}
<div class="container">
<div class="first">
some text here
</div>
<div class="second">
</div>
</div>
Here the float element has a width defined by the content, the inline-block has a width equal to 200px. The negative margin is creating the overlap and the size of the parent element (the containing block) is equal to width + margins.
For the references:
8 Box model
9 Visual formatting model
10 Visual formatting model details
The above explanation is very simplifed. Refer to the specification links for a full and details explanation.
The odd placement from <main> comes from a browser css-rule
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
You can reset it using a css reset like normalize.css.
However, I recommend using display: flex. Some wonderful resources.
.container {
display: flex;
}
main {
width: 75%;
}
aside {
width: 25%;
}
I am building a web page which has 3 DIV inside the main content left,right,right2.Here is a rough design:
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div id="right2"></div>
</div>
And here is the CSS for it:
#content {
height:auto;
overflow:auto;
}
#left {
float: left;
min-height:700px;
width: 70px;
background-color:#6495ed;
overflow:hidden;
}
#right {
float: right;
min-height:700px;
width: 70px;
background-color:#6495ed;
overflow:auto
}
#right2 {
float: right;
min-height:700px;
width: 450px;
background-color:#FFFFF0;
overflow:auto;
}
The issue is the 3 div's left,right and right2 do not fit according to the content size.Like if the main context increases,they stick to 700px height.If I give height:auto then the DIV aren't visible.
I have attached two images to help understand better:
So basically I want to make the size dynamic of the left and right DIV's too,but cannot find a way to do it.Thank you for any responses
Try to use
display:table-cell;
height:auto;
Nowadays I see this problem often
JS Fiddle
Please user below div structure and its css.
<div id="content" style="float: left; height: 700px; width: 100%;">
<div class="content_blk">first block content</div>
<div class="content_blk">second block content</div>
<div class="content_blk">third block content</div>
</div>
css
#content{
float: left;
height: 700px;
width: 100%;
}
.content_blk {
float: left;
height: 500px;
width: 100%;
}
This is sort of hard to explain so I made a fiddle:
https://jsfiddle.net/8wujkpqb/
I have a right floating div with a max-width set. I need the div inside of that to take up 100% of the max-width so the content can be left-aligned to the content in the div below.
<div class="container">
<div class="mainleft">
<div class="outer-red">
<div class="first">
I need this<br/> pushed to the left<br/> to align with the<br/> lower text but still<br/> be in a "max-width"<br/> container floating right.
</div>
<div class="clear"></div>
</div>
<div class="outer-gray">
<div class="second">
this is fine because there is enough content to take up the max-width. this is fine because there is enough content to take up the max-width. this is fine because there is enough content to take up the max-width
</div>
<div class="clear"></div>
</div>
</div>
<div class="mainright">
<div class="right-content">
content
</div>
</div>
<div class="clear"></div>
CSS
.container {
width: 100%;
}
.mainleft {
width: 50%;
float: left;
}
.mainright {
width: 50%;
float: left;
}
.outer-red {
width:100%;
background: red;
padding: 40px;
box-sizing:border-box;
}
.outer-gray {
width:100%;
background: gray;
padding: 40px;
box-sizing:border-box;
}
.first {
float: right;
max-width:250px;
clear:both;
}
.second {
float: right;
max-width:250px;
}
.right-content {
width:100%;
background: blue;
padding: 40px;
box-sizing:border-box;
}
.clear {
clear: both;
}
https://jsfiddle.net/8wujkpqb/
Any help is greatly appreciated!
Just add another div into your "first" container that possesses the max-width and let the parent be the size that is necessary to align the inner container left. Like so
.first {
float: right;
max-width: 100%;
clear:both;
width: 200px
}
.inner {
max-width: 200px
}
https://jsfiddle.net/8wujkpqb/1/
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.
I am trying to learn HTML/CSS by trying to make simple website in HTML/CSS. I have so far build some basic skeleton but there is something I cant solve.
I have a problem where div's articlelisting, sidebar1, sidebar2 are placed inside a div footer, but I want to div's articlelisting, sidebar1, sidebar2 be outside footer.
Here is relevant code:
HTML:
<!-- article listing -->
<div class="articlelisting">
articlelisting
</div>
<!-- sidebar 1 -->
<div class="sidebar1">
sidebar1
</div>
<!-- sidebar 2 -->
<div class="sidebar2">
sidebar2
</div>
<!-- footer -->
<div class="footer">
footer
</div>
CSS:
.articlelisting {
display: inline;
width: 48%;
float: left;
}
.sidebar1 {
display: inline;
width: 24%;
float: right;
}
.sidebar2 {
display: inline;
margin-right: 15px;
width: 24%;
float: right;
}
.footer {
width: 100%;
border: solid 1px red;
}
EDIT:
I have placed articlelisting div. Sorry I missed it.
My question is why are divs articlelisting, sidebar1, sidebar2, inside div footer, and how to place them outside div footer?
Thanks
Hey now clear to your footer as like this
.footer{
clear:both;
overflow:hidden;
/// and write some properties as required to
}
Live demo http://tinkerbin.com/9vrEFCqo
Add clear: both; to your footer style. This makes sure the footer stays clear of the preceding divs that are float-ing.
.footer {
clear: both; <-- Add this
width: 100%;
border: solid 1px red;
}
I posted a working example at jsfiddle
Then put your articlelisting, sidebar1, sidebar2 be outside footer.
and give
.footer {
width: 100%;
border: solid 1px red;
clear:both;
}