I am trying to adjust float part of my menu to the left, and the other part to the right. However, I cannot get it to work.
I have been trying to accomplish it using floats, but I can't quite get it to work.
How can I do this in a proper way?
HTML
<div class="topbar">
<div class="title">Title</div>
<div class="topbar-boxes">
<div class="topbar-boxes-left">
<div class="topbar-box">Box1</div>
<div class="topbar-box">Box2</div>
<div class="topbar-box">Box3</div>
</div>
<div class="topbar-boxes-right">
<div class="topbar-box">Box1</div>
<div class="topbar-box">Box2</div>
<div class="topbar-box">Box3</div>
</div>
</div>
<div style="clear:both"></div>
</div>
CSS
.topbar {
width: 100%;
padding: 14px;
font-size: 18pt;
color: white;
background-color: rgba(42, 42, 42, 0.95);
}
.title {
float: left;
padding-right: 50px;
}
.topbar-boxes {
float: left;
margin: -14px;
}
.topbar-boxes-left {
float: left;
}
.topbar-boxes-right {
float: right;
}
.topbar-box {
float: left;
padding: 20px;
border-left: 1px solid black;
}
http://jsfiddle.net/8eqSN/
Your problem is because you're floating the .topbar-boxes div. When you float, the length of the element is made as thin as possible (rather than filling the width of the page as you'd expect normally), so your float is working, you just can't see it because the parent div is only as wide as the child elements.
To fix, remove this float:
.topbar-boxes {
/*float: left; <----- remove this.*/
margin: -14px;
}
That's because float elements depends on the width of the parent to be positioned since the parent of the boxes topbar-boxes is floated too it width isn't 100%.
Based on your structure and since the tittle is floated too I suggest you remove that container and all works fine taking the margin on the others:
.topbar-boxes-left {
margin: -14px;
float: left;
}
.topbar-boxes-right {
margin: -14px;
float: right;
}
Check this Demo Fiddle
The container div (.topbar-boxes) has a width:auto, by default in every element. That means that its width is going to be as much as its content.
Try to set width:100% in the .topbar-boxes.
Related
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
Example
There is a margin-bottom set for each sidebar-block of 10px, it appears as the inner div which is sidebar-block.body is flowing out of the container.
I researched and debugged and cannot find the cause for this, the only time I use floats is on the main #sidebar itself.
HTML
<div id="sidebar">
<div class="sidebar-block">
<div class="sidebar-block title"><div class="text-with-margin">profile</div></div>
<div class="sidebar-block body"></div>
</div>
<div class="sidebar-block">
<div class="sidebar-block title"><div class="text-with-margin">forum activity</div> </div>
<div class="sidebar-block body"></div>
</div>
</div>
CSS
#sidebar {
float: right;
width: 268px;
margin-top: 10px;
}
.sidebar-block {
margin-bottom: 10px;
}
.sidebar-block.title {
background-color: #2E392F;
min-height: 47px;
color: white;
font-size: 1.2em;
}
.sidebar-block.body {
overflow: hidden;
background-color: white;
}
.text-with-margin {
width: 100%;
padding: 0.5em 0.5em 0.5em 0.5em;
display: block;
}
Fixed, it was because I used .sidebar-block title, .sidebar-block body in a way so that the css for .sidebar-block would automatically be applied to them, not my intention so I renamed the divs.
According to your comment. Change your code for that
#sidebar > .sidebar-block
{
margin-bottom: 10px;
}
Demo: http://jsfiddle.net/fvjw5/1/
You have to set the maximum width of the Sidebar element.
As it is, the Sidebar element does not have a fixed size, which will nullify the
.text-with-margin {
width: 100%; // The width. You should change this.
...
}
See this post for information about position: CSS Positions
You should try something like:
#sidebar {
width: 100%; // Or whatever size you want the sidebar to be.
position: relative; // You can play with this for different results.
...
}
You can look at the information provided on the answer below:
Responsive web design
i have problem with displaing divs inline on mobiles. So code works fine in PC's but when i visit my website in mobile i just dont display divs in right way.
Image div is above the div with text (should be inline). This is not case of width because even if i change width of image to just 5px, this small image is still above not right next to.
Example: http://www.filmypodobnedo.pl/matrix/
Whole thing is about listing of similar movies to chosen one (in example matrix), listed movies (IMAGE + TEXT should be displayed inline, that works on PC but not on mobile).
HTML:
<div class="podobny_film">
<div id="zdjecie_podobne">
<img class="featured-project-image" width="100" height="150" alt="Filmy podobne do Equilibrium" src="http://www.filmypodobnedo.pl/photos/Equilibrium.jpg">
</div>
<div id="tekst_podobne">
</div>
CSS:
.podobny_film {
float: left;
width: 80%;
color: #555555;
border-style: dashed;
border-width: 1px;
border-color: black;
padding: 10px;
}
#zdjecie_podobne {
width: 120px;
float: left;
}
#tekst_podobne {
width: 75%;
float: left;
font-size: 16px;
}
add display:inline-block to #zdjecie_podobne and #tekst_podobne
The div "podobny_film" contains div "zdjecie_podobne" with fixed pixel width and div "tekst_podobne" with percentage width. Try to use a percentage width for the div "zdjecie_podobne" and for the image as well, then it should not break.
#zdjecie_podobne {
width:24%; /*together with tekst_podobne that's 99% so be aware of any margins or paddings that might sum up > 100%!*/
float: left;
}
.featured-project-image { width:100%; }
This should work :) :
#zdjecie_podobne {
width: 120px;
float: left;
display:inline-block;
}
#tekst_podobne {
width: 75%;
float: left;
font-size: 16px;
display:inline-block;
}
I have two elements that have variable width, and must share the same space in a div
I created an example in this link:
http://jsfiddle.net/zWVVN/
#test-1: Should look like.
#test-2: Problem situation.
Hi you define hr float left that conditions you must define width of all hr those give to float as like this
Css
#teste1, #teste2 {
width: 300px; }
hr {
border: 1px solid green;
background: red;
height: 25px;
float: left;
width:200px;
}
h2 {
float: right;}
#teste1 hr{
width: 230px;}
HTML
<div id="teste1">
<hr>
<h2>conteudo</h2>
</div>
<div id="teste2">
<hr>
<h2>conteudo</h2>
</div>
Live demo http://jsfiddle.net/rohitazad/3e6bd/2/
If you want both divs to take up the whole space and do not want to wrap text down, then why have u set the width for both the divs to 300px. Remove the width assigned to both the divs and make both HR to float left.
#teste1, #teste2 {
//this class not needed
}
hr {
border: 0;
background: red;
height: 5px;
float: left;
}
h2 {
float: left;
}
Demo : http://jsfiddle.net/3e6bd/3/
I have a <div id="content">, which contains <div id="sub-navigation> and <div id="main container">, which themselves are inline-blocks. I would like to be able to make the main container fill the rest of the available page width. Is that possible?
I need columns-strip to expand or shrink based on the number and width of column elements. If the width of the columns-strip exceeds the width of the main container, then a horizontal scroll bar should appear.
* {
margin: 0px;
padding: 0px;
font-size: 10pt;
white-space: normal;
}
#wrapper {
margin: 0px 20px;
background-color: red;
}
#header {
margin: 25px 10px 10px 10px;
height: 50px;
background-color: purple;
color: white;
}
#content {
margin: 10px;
padding: 10px;
font-size: 0pt;
white-space: nowrap;
overflow: hidden;
background-color: white;
}
#sub-navigation {
width: 200px;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
display: inline-block;
overflow: auto;
background-color: yellow;
}
#columns-strip {
padding: 10px;
font-size: 0pt;
white-space: nowrap;
background-color: mediumturquoise;
}
.posts-column {
margin: 0px;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
overflow: auto;
}
#footer {
margin: 10px 10px 25px 10px;
height: 50px;
background-color: navy;
}
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="sub-navigation"></div>
<div id="main-container">
<div id="columns-strip">
<div class="posts-column" style="background-color: lightgray;"></div>
<div class="posts-column" style="background-color: darkgray;"></div>
<div class="posts-column" style="background-color: gray;"></div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
You have to remove the inline-block styles and float the #sub-navigation div. inline-block is not suited for what you are trying to achieve. When you add no display styles, the div element will be the default value which is block, block elements take up all the available space by default. By floating the #sub-navigation element you make it only take up the space required for its contents.
#sub-navigation {
width: 200px;
height: 150px;
float : left;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
overflow: auto;
background-color: yellow;
}
make sure to add a clear: left element after the #main-container
That's not how inline-blocks are supposed to be used. Best thing to do here is make your navigation box float:left and leave the default display value alone.
If your header, footer and wrapper have specific widths, then yes, you can have your main-container fill the available space. But if you're not specifying widths in your CSS, then you need to determine how big your main-container CAN be based on the rendered width of the containing element (wrapper). The only way to determine that width after the page loads is with javascript. If you want your site to have a dynamic width but still have your content (sub-navigation and main-container) fill the screen, you would either need to use javascript or percentages, and percentages can get ugly when you start looking at varying resolutions of monitors, laptops, etc...
Ever heard of flex box model!!
It is made just for that.
Note in flexbox model all child elements act as flex box model you cant opt out certain things. Which mean if page has navigation and under it content div + side div. You can't make top navigation out of it. Which has implications. So solution is to have all things only that need flex box in one div.