I have been struggling with this for over 4 hours now and I can't figure this out.
Usually when I design a site I always have it centered so I never face the problems were divs break out of the layout.
ISSUE 1
I have a sidebar on the left, followed by a content block and then a sidebar on the right.
Each sidebar should be 180px wide and the content block should fill the empty space between those two sidebars.
I can't even get them to float next to eachother now, I could do so before but I am really getting crazy.
Even if I do get them to float next to eachother, when I zoom in the page the content block breaks layout and falls down below the left sidebar it is so super annoying I never had this issue before.
ISSUE 2
The div Block at the header should automatically size between the two logos, similar to what i need for the content_wrapper, how can i do this?
Can someone help me please?
Thanks
HTML
<div id="header">
<div id="left_logo" class="logo"></div> <!-- Logo on the Left -->
<div id="block">This is a block</div> <!-- Div block inbetween the two logos -->
<div id="right_logo" class="logo"></div> <!-- Logo on the Right -->
</div>
<div id="content_wrapper">
<div id="left_sidebar" class="sidebar">Left Sidebar</div>
<div id="middle_content">Middle Content</div>
<div id="right_sidebar" class="sidebar">Right Sidebar</div>
</div>
CSS
html,body {
height:100%;
}
body {
background-image: url('../bg.jpg');
}
#header {
width: 100%;
border: solid 1px;
overflow: hidden;
}
.logo {
width: 180px;
height: 180px;
background-image: url('../avatar.jpg');
border: solid 1px;
}
#block {
border: solid 1px;
float: left;
}
#left_logo {
float: left;
}
#right_logo {
float: right;
}
#content_wrapper {
width: 100%;
}
.sidebar {
width: 180px;
float: left;
}
#middle_content {
min-height: 500px;
width: 100%;
float: left;
}
There are several points to note
move the #right_sidebar before the #middle_content
#right_sidebar must float right not left
#middle_content must not float and not have width: 100%
if you want to have the #middle_content in its own column, i.e. not float below the left and right sidebar, add margin-left and margin-right
The same applies to #header.
See JSFiddle for how this could look like.
Although it's several years old, there's a nice overview of basic layout schemes with CSS at http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
Related
I have a problem aligning my div's side by side...
Here is an image how it should look:
This is the code for the main structure:
<div id="AttackDiv">
<div id="ImageDiv">
</div>
<div id="ContentDiv">
</div>
<div id="SkillDiv">
</div>
</div>
The "ImageDiv" is where the picutre is located. It takes up 120px.
The "ContentDiv" is where the text is inside and the "SkillDiv" is where the 3 other black boxes are inside.
This is my CSS:
#ImageDiv {
height: 100%;
width: 120px;
float: left;
background-color: white;
}
#ContentDiv {
height: 60%;
background-color: green;
}
#SkillDiv {
height: 40%;
background-color: blue;
}
Shows up this:
The problem is when I am trying to add those black boxes which you can see above in the image. Here is how it looks:
If I remove the white background color, you can see that somehow the Div's aren't aligning properly. They are kinda like running in each other.
Divs are block elements by default and, in the normal flow, they occupy 100% width of their container. So, naturally, div elements will stack vertically forming a column.
To make them align side-by-side consider these options:
apply float: left to all divs you want to display in a row
define the divs as display: inline-block
OR, for a very simple and efficient solution, just use flexbox:
Aligning Three Divs Horizontally Using Flexbox
Also, when working with floats, it helps to be familiar with clearfix methods:
What is a clearfix?
What methods of ‘clearfix’ can I use?
Clearing Floats: An Overview of Different clearfix Methods
Put the stuff on the right side into its own div container and then float it to the right.
If I understood you right, this should be it:
HTML
<div id="AttackDiv">
<div id="ImageDiv">left
</div>
<div id="RightSide">
<div id="ContentDiv">right1
</div>
<div id="SkillDiv">right2
</div>
</div>
</div>
CSS
#ImageDiv {
height: 100%;
width: 120px;
float: left;
background-color: white;
}
#ContentDiv {
height: 60%;
background-color: green;
}
#SkillDiv {
height: 40%;
background-color: blue;
}
#RightSide {
float: right;
width: 200px;
}
You can look at it here: https://jsfiddle.net/mxcqyjos/4/
I'm working on a responsive website, and I ran into some trouble doing the layout. I broke the problem down to the fewest lines possible.
When the window is larger then 909px I want to place my second content (content2) just below the title. When there is less space availible I want it to be placed below the image.
Currently it always gets placed below the image.
Here's a visual.
I need to find a solution without using absolute positioning, because the title does not have a fixed height. In fact none of my html elements have a fixed height, I do have fixed widths though.
I have been trying to come up with a simple solution for a few hours now. Here's hoping someone can point me in the right direction :)
Thanks for reading!
HTML code:
<div class="wrapper">
<h1> some title </h1>
<div class="image"> some img</div>
<div class="content1"> some content </div>
<div class="content2"> some other content </div>
</div>
CSS styles:
.content1{
float: left;
}
.image{
width: 600px;
}
.content2{
width: 300px;
float: right;
}
#screen and (min-width: 768px) and (max-width: 909px){
.wrapper {
width: 700px;
}
.content1 {
width: 300px;
}
}
#screen and (min-width: 909px){
.wrapper {
width: 900px;
}
.content1{
width: 600px;
}
}
Here is one way of doing it for the case of min-width: 909px
The CSS is:
#media screen and (min-width: 909px) {
.wrapper {
width: 900px;
outline: 1px dotted blue; /* optional for demo */
}
.image {
width: 600px;
float: left;
outline: 1px dotted blue; /* optional for demo */
}
.content1 {
float: left;
width: 600px;
outline: 1px dotted blue; /* optional for demo */
}
.content2 {
width: 300px;
margin-left: 600px;
outline: 1px dotted blue; /* optional for demo */
}
}
and the demo fiddle is: http://jsfiddle.net/audetwebdesign/WfyJL/
I did not see anything about heights, so I assume that the content will take determine the various heights of the elements.
How This Works
In your previous example, content2 is floated so its top edge is placed next to the bottom edge of the nearest, adjacent block level element, which is image.
To get the desired layout for the 900px format, float image to the left, and keep content2 in the flow but with a 600px left margin to allow the left floated elements to flow down the left hand side of content2.
maybe you need use some like this, with offsets, hope your help
<div id="wrapper">
<div class="row-fluid">
<div class="span4">
<h1> some title </h1>
</div>
<div class="span4">
<div id="image"> some img</div>
<div id="content1"> some content </div>
</div>
</div>
<div class="span8 offset5">
<div id="content2"> some other content </div>
</div>
</div>
I have a couple of classes there so let me post them first.
HTML:
<div class="content">
<div class="sidebar">
</div>
<div class="area">
</div>
</div><!-- content closed -->
CSS:
.content {
background-color: #eee;
height: auto;
}
.sidebar {
background-color: #555;
width: 250px;
height: auto;
padding: 10px;
float: right;
}
.area {
background-color: #777;
width: 590px;
height: auto;
padding: 10px;
}
So, you can basically see that every single class have height set on "auto". Thats good cause I want content to follow sidebar and area. And they will have plenty of content inside of them.
Now...
.sidebar is set on float:right; so it doesnt really affect to move the content that stands below. Which is footer in my case.
I am wondering how to make the object thats floating, to move the parts that are below of it, depending on auto set height.
I'm not sure I understand your question, but if you are trying to position footer underneath your content that is floated right, you need to clear the float:
<div class="content">
<div class="sidebar">
</div>
<div class="area">
</div>
<div style="clear:both"></div>
This is the footer
</div><!-- content closed -->
Jsfiddle: http://jsfiddle.net/xmw7M/1/
I didn't find something good that helps me so I'm asking a question, sorry if there is any answer lying around somewhere already
I want an html page wiht a header, left div for a menu, and in the middle (where you usually have 1 content div) - 4 divs for 4 graphs, and I want them to be aligned:
menu div | 1 2
| 3 4
I couldn't do that with float left, because number 3 doesn't stick to the menu, but to the left of the page...
any thoughts? (besides making everything super fixed, which is a solution I don't like)
HTML
<div id="menu">Menu</div>
<div id="content">
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
<div id="d4">4</div>
</div>
CSS
#menu {
float: left;
width: 20%;
}
#content {
float: right;
width: 80%;
}
#d1, #d2, #d3, #d4 {
width: 50%;
}
#d1, #d3 {
float: left;
}
#d2, #d4 {
float: right;
}
See this fiddle.
Note You might want to give the 4 divs equal height depending on your content.
#d1, #d2, #d3, #d4 {
width: 50%;
height: ...
}
A variation on melhosseiny's answer.
The blocks will automatically compensate for different heights
fiddle
Markup
<div id="menu">Menu</div>
<div id="content">
<div class="content-block">
first block<br />
second line<br />
third line<br />
</div>
<div class="content-block">
second block
</div>
<div class="content-block">
third block
</div>
<div class="content-block">
fourth block
</div>
</div>
CSS
#menu {
float: left;
width: 200px;
background: #ccc;
}
#content {
margin-left: 200px;
/* for the benefit of ie6 double margin bug */
zoom: 1;
}
.content-block {
background: #efefef;
float: left;
width: 50%
}
/* every second block clears starting at block 3 */
.content-block:nth-child(2n+3) {
clear: left;
}
The details of your question are a bit vague, but perhaps a margin-left on item 3 equal to the width of your menu div would allow your float-strategy to work.
If you post your actual code, your question will afford more helpful responses.
If You don't want anything to be fixed, than probably this is the way to go :
<div> <!-- upper content -->
<div style="float:left">1</div>
<div style="float:left">2</div>
</div>
<div> <!-- lower content -->
<div style="float:left">3</div>
<div style="float:left">4</div>
</div>
I'm reworking a layout currently using tables for a two-column design, and ran into some problems.
<div id="frame">
<div id="leftcol">
<div id="1">blah</div>
</div>
<div id="leftcol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
#leftCol
{
margin-right: 10px;
width: 49%;
float: left;
}
#rightCol
{
width: 49%;
float: left;
}
Originally I had a two-columned table with width=100% - this worked perfectly in Firefox, but in IE the table overflowed the #frame div container. I removed this table and added two floated divs, but I still have issues getting the columns to be equal.
All of my content resides inside the div #frame, which has height constraints as well as padding and a margin (I use this to leave a "gutter" around the edge of the page).
I need the two floated DIV columns to be the same width, and sit next to each other with a 10px (ish) gutter in between. I tried making both width: 50%, but this fails because the container they are in (#frame) is smaller width-wise then the whole body of the page. (If I get rid of the gutter padding, it works in FF but still not in IE.
Making each column width: 49% works, but looks ugly as the size changes between browsers and the right column does not line up with the edge of the #frame container.
I tried doing this before but ultimately went back to tables 9since it seemed to be working), but now that I see it's incompatible with IE I've been working for hours to find a cross-browser css solution. Any ideas?
Setting each column to 50% should work, if you make sure they don't have any margins or paddings.
If they need padding, put in an extra wrapper div, that can have as much padding/margins as neccesary.
For the gutter in between, you could give these wrapper divs a border on left/right side to make it look like a space in between the columns.
Posting a full code example (on jsbin.com for example) would also help us understand your problem more easily. :)
I think you might benefit from a css framework like 960gs or blueprint css it allows absolute grid placement and is cross browser compatible out of the box.
http://www.blueprintcss.org/
http://960.gs/
If you know the width of the frame, you can do this
#frame {
background-color: green;
width: 500px;
overflow: auto;
}
#leftCol
{
width: 245px;
float: left;
background-color: red;
}
#rightCol
{
width: 245px;
float: right;
background-color: blue;
}
<div id="frame">
<div id="leftCol">
<div id="1">blah</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
Otherwise, an add an extra div, and do this
<div id="frame">
<div id="leftCol">
<div id="hack">
<div id="1">blah</div>
</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
#frame {
background-color: green;
width: 500px;
overflow: auto;
}
#leftCol
{
width: 50%;
float: left;
}
#hack {
margin-right: 10px;
background-color: red;
}
#rightCol
{
width: 50%;
float: right;
background-color: blue;
}
Ok here you go. This is how it can be achieved.
CSS
#leftCol, #rightCol{
width: 48%;
float: left;
background: red;
box-sizing: border-box;
}
#leftCol{
margin-right: 1%;
}
#rightCol{
margin-left: 1%;
}
HTML
<div id="frame">
<div id="leftcol">
<div id="1">blah</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
If you need here is the vendor prefix for box-sizing.
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Note that you have typo in your HTML wher both div are called #leftCol. There is no#rightCol.