I want to have in the same raw, in the left a logo, and in the right a menu like Contact Us. If I make 3 divs for this and I allign the first left, and the 3rd right, it doesn't work. How can you have this?
Float would be a clean, simple way to do it. Try floating your logo div left, and your menu div right, like so:
HTML:
<div id="navbar">
<div id="logo">Logo</div>
<div id="navmenu">Nav menu</div>
</div>
CSS:
div#logo {
float: left;
}
div#navmenu {
float: right;
}
Without any actual markup to look at, the following is a very simple three-column setup. This is not meant as a three-column page layout, only three columns stretching across the top. Note the use of float to send the DIV's to the same row, left to right*.
* You could set the last right. Also, you will have to clear as well for any content following the #menu-row DIV (this is the overflow: auto part).
CSS
#menu-row {
overflow: auto;
}
#menu-logo {
width: 10%;
float: left;
}
#menu-logo img {
width: 100%;
}
#menu-content {
width: 80%;
background: #ddd;
float: left;
}
#menu-right {
width: 10%;
height: 1.3em;
background: #dfd;
float: left;
}
#menu-content li {
display: inline;
list-style-type: none;
height: 128px;
}
#page-content {
background: #ddf;
}
HTML
<div id="menu-row">
<div id="menu-logo">
<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
</div>
<div id="menu-content">
<ul>
<li>Home</li>
<li>About</li>
<li>Stuff</li>
</ul>
</div>
<div id="menu-right"></div>
</div>
<div id="page-content">
<p>This is stuff.</p>
</div>
http://jsfiddle.net/LYJUB/1/
I dont fully understand your question, but you might be able to fix it by positioning the divs absolute.
in the HTML: <div id="leftdiv"></div>
in the CSS:
#leftdiv{
width:10%;
height:100%;
position:absolute;
left:0%;
top:0%;
}
#rightdiv{
width:10%;
height:100%;
position:absolute;
right:0%;
top:0%;
}
#centerdiv{
width:80%;
height:100%;
position:absolute;
left:10%;
top:0%;
}
Related
I need to do a website top with some navegations tools.
It is working but I'm not confortable with. I think maybe it is not the right way to do these floating divs on the right.
I need an image on the left and two itens on the right of a full width div.
So I did:
<div id="menu">
<div id="logo">LOGO</div>
<div id="item">Settings</div>
<div id="item">Options</div>
</div>
and
#menu{
position:fixed;
width:100%;
height:50px;
background:#fff;
}
#logo{
float:left;
right:30px;
}
#item{
float:right;
right:30px;
margin-right:10px;
}
Is it ok with float right and everything else or should I change something?
jsfiddle
on #item the right:30px does nothing if you dont specify the postion. Use
#item{
float:right;
position:relative;
right:30px;
}
Flexbox...no need for floats or positioning at all....and the items are in the right order.
#menu {
position: fixed;
width: 100%;
height: 50px;
background: #fff;
display: flex;
}
.logo {
margin-right: auto;
}
.item {
margin-right: 10px;
}
<div id=menu>
<div class="logo">LOGO</div>
<div class="item">Settings</div>
<div class="item">Options</div>
</div>
I am expected result and the code are as following. My current style works but the problem is that the footer is too wide and and menu1.menu2,menu3 are not as illustrated blew,
Expected result
50% |LeftHeader middleHeader RightHeade| 50%
50% | Menu1 Menu2 Menu3 | 50%
50% |Content goes here ***********************************************| 50%
|*****************************************************************|
50% | text of Footer goes here | 50%
These lines >> | show the border sections for example footer is that big but its text should be in center.
My code is as following
<html>
<head>
<style>
#wrapper {
margin: 0 auto;
width:50%;
}
#header {
background-color:#faa;
height:50px;
font-size: 0;
}
#header > div {
display: inline-block;
width: 33.3333%;
font-size: 12pt;
height: 100%;
}
#left {
background-color:red;
height:20px;
}
#middle {
background-color:yellow;
height:20px;
}
#right {
background-color:green;
height:20px;
}
#menu {
width: 100%;
margin: 0 auto;
background-color:#faa;
height: 20px;
font-size: 0;
}
#menu > a {
display: inline-block;
font-size: 12pt;
width: 33.333%
}
#leftm {
text-align: right;
}
#content {
top:50px;
bottom:150px;
overflow:auto;
}
#footer {
bottom: 0;
width: 100%;
background-color:#afa;
height:150px;
position:fixed;
}
#footer > div {
margin-left: 50%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="left">
left header
</div>
<div id="middle">
middle
</div>
<div id="right">
right header
</div>
</div>
<div id="menu">
<div id="leftm">menu1</div>
menu2
menu3
</div>
<div id="content">
vbcfxbfgbfcgbfg
</div>
<div id="footer">
<div id="footertext">
And here's the footer
</div>
</div>
</div>
</body>
Result of my current code
50% |LeftHeader middleHeader RightHeade| 50%
50% |Menu1 Menu2 Menu3 | 50%
50% |Content goes here ***********************************************| 50%
|*****************************************************************|
50% | text of Footer goes here | 50%
See updated code here.
I've wrapped the menu links in another div: display: inline-block with the text-align of the #menu set to center. This centers the three links.
The text in the footer is also centered through text-align: center.
Firstly, it is bad practice to open a new question asking the same thing. Secondly, avoid announcing "My code" unless you wrote the majority of it (this is not the case here). Thirdly, this question does not show much research effort as the footer text-align can easily be searched up.
A few things:
You can size the footer and still use position:fixed at 50% as that's what the wrapper is.
You had a few unnecessary tags (if I understand what you want)
You were sizing your menu items by 33% when it seems like you didn't want that.
jsFiddle
HTML
<div id="wrapper">
<div id="header">
<div id="left">left header</div>
<div id="middle">middle</div>
<div id="right">right header</div>
</div>
<div id="menu">
menu1
menu2
menu3
</div>
<div id="content">vbcfxbfgbfcgbfg</div>
<div id="footer">
And here's the footer
</div>
</div>
CSS
#wrapper {
margin: 0 auto;
width:50%;
}
#header {
background-color:#faa;
height:50px;
font-size: 0;
}
#header > div {
display: inline-block;
width: 33.3333%;
font-size: 12pt;
height: 100%;
}
#left {
background-color:red;
height:20px;
}
#middle {
background-color:yellow;
height:20px;
}
#right {
background-color:green;
height:20px;
}
#menu {
width: 100%;
margin: 0 auto;
background-color:#faa;
height: 20px;
font-size: 0;
text-align:center;
}
#menu > a {
display: inline-block;
font-size: 12pt;
margin:0 .5em;
}
#content {
top:50px;
bottom:150px;
overflow:auto;
}
#footer {
bottom: 0;
width: 50%;
background-color:#afa;
height:150px;
position:fixed;
text-align:center;
}
I'm confused by the goal. Does the footer need to be fixed? If yes, see example 2. Does the wrapper need to be height 100%?
Example 1:
FIDDLE
Example 2:
To fix the footer to the bottom of the window, add this to the footer:
width:50%;
position:fixed;
bottom:0;
left:50%;
margin-left:-25%;
I have been sitting for a while to come up with a solution to a problem. I want to make a website that consists of three columns (left, center, right). These three will together cover the entire screen width. One column will consist of a fixed pixel value and the other two columns should be as wide that the middle column is centered on the screen.
The reason I need the left and right columns is because I want to hide things behind them, and then animate these things into the center column.
Anyone have a solution?
I'm not happy about the width: 10000% bit on this, maybe someone can come up with a cleaner solution but I think this will do what you're describing. These kinds of layouts are a little tricky when you're looking for a pure CSS solution.
HTML:
<div id="content">
<p>Content goes in here</p>
<ul>
<li>Whatever</li>
<li>Kind</li>
<li>Of</li>
<li>Content</li>
</ul>
<div class="sideCol" id="left"></div>
<div class="sideCol" id="right"></div>
CSS:
#content
{
width: 200px;
margin: 0 auto;
position: relative;
}
.sideCol
{
width: 10000%;
height: 100%;
position: absolute;
}
#left
{
background-color: red;
right: 200px;
top: 0;
}
#right
{
background-color: blue;
top: 0;
left: 200px;
}
http://jsfiddle.net/fLH9T/
HTML
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
CSS
.left { float:left; width:33%; height:200px; z-index:100; diplay:block; }
.center { float:left; width:33%; height:200px; z-index:1; diplay:block; }
.right { float:right; width:33%; height:200px; z-index:100; diplay:block; }
I assume this is what you want.
I have 3 divs in one row
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
here's how its layed out
I need the middle div to stay a fix width, but the left and right divs to shrink in as the screen gets smaller, heres an example
how would I write out the css?
this is how I have it so far, and by the way the 3 divs are wrapped in another div#mid
#mid {
max-width: 100%;
min-height: 395px;
max-height: 395px;
position: relative;
background-color: #F00;
display: block;
}
#left {
min-width:35%;
min-height: 395px;
max-height: 395px;
background-color: #00F;
position:relative;
float: left;
}
#middle {
min-width:30%;
min-height: 395px;
max-height: 395px;
background-color: #3F0;
position:relative;
float: left;
}
#right {
min-width:35%;
min-height: 395px;
max-height: 395px;
margin:0;
padding:0;
background-color: #0FF;
position:relative;
float: left;
}
if anyone can help me out id really appreciate it, thanks in advance!
Here I've answered this question, you can do it like this : My Fiddle
<div class="container">
<div class="first"></div>
<div class="static"></div>
<div class="third"></div>
</div>
CSS
.container {
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:stretch;
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-align:stretch;
display:box;
box-orient:horizontal;
box-align:stretch;
color: #ffffff;
}
div {
height: auto;
}
.first {
background-color: #546547;
}
.static {
background-color: #154d67;
width: 300px;
}
.third {
background-color: #c00000;
}
.first, .third {
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
Its very simple give fixed width to the middle div like width:300px...Hope this will be useful...
Very Simple.
Float the three divs.
Set the display property to 'inline-block'.
Set the width attribute of middle div.
Set max width attribute of the left & right div.
Here is the HTML markup I have tested with:
<body>
<div id="left">LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT</div>
<div id="middle"></div>
<div id="right">
RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT
</div>
</body>
Here is a sample CSS:
#right,
#left {
background-color:green;
float:left;
display:inline-block;
max-width:20%;
min-height:20px;
}
#middle {
width: 60%;
float:left;
display:inline-block;
background-color:blue;
min-height:20px;
}
And here is the implementation: http://jsfiddle.net/3yEv3/
I have a div that contains three elements, and I am having problems correctly positioning the last one. The div at the left has to be at the left, the one in the middle needs to be centered, and the third one needs to be to the right.
So, I have something like:
#left-element {
margin-left: 9px;
margin-top: 3px;
float:left;
width: 13px;
}
#middle-element {
margin:0 auto;
text-align: center;
width: 300px;
}
#right-element {
float:right;
width: 100px;
}
My html looks like this:
<div id="container-div">
<div id="left-element">
<img src="images/left_element.png" alt="left"/>
</div>
<div id="middle-element">
I am the text inside the middle element
</div>
<div id="right-element">
I am the text in right element
</div>
</div>
Any ideas?
Thanks!
You haven't included css for your container div, but whenever it contains floating elements you should hide overflow like so:
#container {
overflow: hidden;
width: 100%; /* for good measure */
}
When you position the middle div you are setting margins that span the entire container, so any further elements are getting positioned on the line below. Note, at least for most modern browsers, further. If you reorder your elements, like so:
<div id="container">
<div id="left-element">
<img src="images/left_element.png" alt="left"/>
</div>
<div id="right-element">
I am the text in right element
</div>
<div id="middle-element">
I am the text inside the middle element
</div>
</div>
You should find it works. Better method, as I'm not quite sure whether that is supposed to work, would be to use css positioning. Apply the following css:
#container {
overflow: hidden;
width: 100%;
min-height: 36px; /* Remember absolute positioning is outside the page flow! */
position: relative;
}
#left-element {
position: absolute;
left: 9px;
top: 3px;
width: 13px;
}
#middle-element {
margin: 0 auto;
text-align: center;
width: 300px;
}
#right-element {
position: absolute;
right: 0px;
top: 0px;
width: 100px;
}
I think you problem is that you floated the left and right element but not the center one. Try something like this:
CSS:
<style>
#container { display:block; margin:0; padding:0; width:640px; height:400px; outline:1px solid #000; }
#left-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ccc; }
#middle-element { float:left; display:block; margin:10px 0; padding:0; width:200px; height:380px; background:#eaeaea; }
#right-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ddd; }
</style>
HTML:
<div id="container">
<div id="left-element">Left Element</div>
<div id="middle-element">Middle Element</div>
<div id="right-element">Right Element</div>
</div>
The problem is specifically that the middle div has a width set but is not floated, meaning it is still a block level element. Even though the div itself does not go the entire width of the container, it is still treated as such. You need to do 2 things - float the middle div, then clear the floats so the container grows with the height of the child divs. The clearfix method is preferred since it does not cause issues with CSS3 properties that naturally extend outside the bounds of the element they are applied to (box-shadow, text-shadow, etc).
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
I had the exact same issue. I used this approach. I made the center element display inline-block. That way I didn't have to give the elements specific width or the main container a specific height. The blocks only took up as much space as the content inside. Hope this helps.
.main-nav {
text-align: center;
padding: 2em 3em;
background: #f4f4f4;
}
#logo {
margin: 0;
width: 50px;
float: left;
margin-top: 18px;
}
#logo-link {
float: left;
display: inline-block;
}
.name {
display: inline-block;
}
.nav {
float: right;
margin-top: 18px;
}
.nav li {
float: left;
margin-right: 15px;
margin-top: 5px;
}
.nav li:last-child {
margin-right: 0;
}
<header class="clearfix">
<div class="main-nav">
<img src="img/site-logo.svg" alt="Munchies" id="logo">
<div class="name">
<h1>The Munchies Family Site</h1>
<h2>Designer</h2>
</div>
<nav class="nav clearfix">
<ul>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
strong text