I have a menu in the top of my website with this css:
.menu {
width: 100%;
display: block;
float: left;
}
inside of it, I have few divs:
.menu .menu-item {
position: relative;
width: 260px;
float: left;
height: 430px;
}
This is all good, but when I try to add a small div underneath the menu, with this HTML structure:
<div class="menu">
<div class="menu-item">
</div>
</div>
<div class="menu-bar">
</div>
and this css:
.menu-save {
position: relative;
display: block;
margin: 0 auto;
width: 100%
height: 20px;
}
With this CSS my expected output is that the menu-bar div goes underneath the whole menu, but what I'm currently getting is that menu-bar sits inside of menu, at the top of it. What CSS am I missing?
I think
use clear: both CSS property to avoid the floating problem
<div class="menu">
<div class="menu-item">
</div>
</div>
<div class="clear"></div>
<div class="menu-bar">
In Css add this one
.clear{
clear:both;
}
Related
For my class I have to have 3 divs floated left in a row with the outer two half the size of the middle one. It's driving me crazy that the rows aren't centered on the page. Is there a way to center them without getting rid of the float?
I tried creating a container div with text-align just as a shot in the dark but that didn't work. All other research I've seen is to change the float to display but I have to use float so I can't do that.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.cover {
width: 20%;
}
div.author {
width: 50%;
font-family: calibri;
}
div.links {
width: 20%;
}
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<p class="link" onclick="parent.open('https://www.britannica.com/biography/Veronica-Roth')">
https://www.britannica.com/biography/Veronica-Roth
</p>
</li>
</ul>
</div>
Your instinct to wrap the 3 "columns" in a container div is correct. This allows you to use what is commonly referred to as the "clearfix" trick. Items that are "floated" are ignored by the normal box flow of the page which is why the container seems to collapse and ignore your floating contents.
Frustrating indeed!
This is the "clearfix":
div.container:after {
content: ''; /* no content in this pseudo element */
display: table; /* be 100% wide */
clear: both; /* clear the previous floats */
}
The :after pseudo selector on the container is the same thing as putting an empty div as the last item in the container. By clearing the floats, the container will wrap around the floating items.
This is a hack... but it works! The entire web development community has used this to "fix" the difficulties inherent with using floats for years to create layouts before the advent of real layout systems like Flexbox and CSS Grid.
After the container clears the floating items inside, just set the widths so that they add up to 100% and you are good.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.container:after {
content: '';
display: table;
clear: both;
}
div.cover {
width: 25%;
float: left;
}
div.author {
width: 50%;
font-family: calibri;
float: left;
}
div.links {
width: 25%;
float: left;
}
<div class="container">
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<a href="https://www.britannica.com/biography/Veronica-Roth">
Veronica-Roth
</a>
</li>
</ul>
</div>
</div>
div.container position:relative;
div.cover float:left;
div.autor put inside tag align="center"
div.links float:right;
or
div.autor margin:5%;
or
display:inline-block;
or you can use text-align:center; in css on the parent div and then display:inline-block; on each div inside the parent div
I want to make an image in the left and the text on the right.
This is a jsfiddle
http://jsfiddle.net/VnnZ2/
I put the image in a div with class imageClass and I put the text in a div with class information and I gave the imageClass left float and the information right float.
I also tried to make this:
display: inline-block;
for both classes but still the result as you see in the jsfiddle.
I tried the same css with label and input and it works but I don't know why it is not working with div and div.
Plus, I already give the imageClass a width 200 and the informaton class a width 300 and the ul width 500px so I tried all what I could
Update 1
Sorry I gave you the wrong jsfiddle by mistake, this is the correct one http://jsfiddle.net/VnnZ2/9/
Check this updated code
HTML:
div class="allRestaurants">
<ul>
<li>
<div class="imageClass">
<img src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
<div class="information">
nameres </div>
</li>
</ul>
<ul>
<li>
<div class="imageClass">
<img src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
<div class="information">
Zuma 2 </div>
</li>
</ul>
</div>
CSS:
.allRestaurants{
background-color: #376b66;
width:100%;
float:left;
}
.allRestaurants ul{
margin: 10px;
padding: 0;
width: 600px;
background-color: #ffffff;
margin-left: 10px;
width:90%;
overflow:auto;
}
.allRestaurants ul li{
margin-bottom: 10px;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
-webkit-border-radius: 10px;
}
.allRestaurants ul li .imageClass{
float: left;
}
.allRestaurants ul li .imageClass img{
width: 200px;
height: 200px;
}
.allRestaurants ul li .information{
width: 250px;
}
.allRestaurants ul li{
float:left;
clear:both;
}
Updated JS FIDDLE CODE
You need to clear your floats to stop the parent element collapsing. There are a number of ways. This is probably the simplest to understand:
WORKING DEMO
<li>
<div class="imageClass">
<img src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
<div class="information">nameres</div>
<div class="clearfix"></div> /* Add an empty element with class .clearfix */
</li>
In your CSS:
.clearfix {
clear: both;
}
Or this method:
WORKING DEMO
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
Where the clearfix class would be applied to the parent element(li)
Add overflow: auto; to .allRestaurants ul li, that way the li will know that there are elements inside it that float.
Also, check this updated Fiddle.
On the following jsfiddle:
http://jsfiddle.net/oshirowanen/4fgkj/
Here is a snippet of the HTML as it would have been too much HTML to post up here if I posted the whole thing:
<div id="main">
<div class="inner">
<ul class="column">
<li class="one">
<ul>
<li>SIDE MENU</li>
<li>SIDE MENU</li>
<li>SIDE MENU</li>
</ul>
</li>
<li class="two">
<ul>
<li class="main_content">
<p>content goes here</p>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
You will see that I have a menu and some content. The problem is that I don't want the content to wrap around the menu.
How do I stop that from happening?
First of all, don't use li for content, it's only used for displaying lists (such as menus).
Second - to answer your question - a structure like this might do what you want, and is quite regularly used:
HTML:
<div class="wrapper">
<div class="header">
header
</div>
<div class="wrapright">
<div class="right">
right
</div>
</div>
<div class="left">
left
</div>
<div class="footer">
footer
</div>
</div>
CSS:
.wrapper{
width: 90%;
margin: 0 auto;
}
.header{
float: left;
width: 100%;
background-color: #f4f4f4
}
.wrapright{
float: left;
width: 100%;
background-color: #cfcfcf
}
.right{
margin-left: 220px;
background-color: #afeeee;
height: 200px;
}
.left{
float: left;
width: 200px;
margin-left: -100%;
background-color: #98fb98;
height: 200px;
}
.footer{
float: left;
width: 100%;
background-color: #f4f4f4;
}
body {
padding: 0px;
margin: 0px;
}
LIVE DEMO
Of course, you'll have to adjust the CSS to change background colour, padding,... and the HTML to adjust the content. But I think you'll be able to figure that out.
Well, don't tell it to wrap around... in :
#main .column .one {
padding:10px 10px 10px 0px;
float:left;
}
just remove the line
float:left;
You have to set min-height to your css rules (#main .column .one). If you set it, your content will be right the menu, but will not be wrapped around it.
#main .column .one {
padding:10px 10px 10px 0px;
float:left;
min-height:600px;
}
All you need to do is add this to your styles:
.main_content {overflow: hidden;}
However, I must say, using a ul for page layout like that is not a good idea. Semantically, your page content is not an unordered list.
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;
}
i'm attempting to create an header which is divided into 3 divs
they will all be set to display: inline-block
the left header part will contain a slogan and a logo which i wan't the slogan to be at
the right of the logo
the problem is my logo div and my slogan div are always placed one on top of the other .
to my understanding an inline element would be placed next to the last inline element
with in the same block , notice that the header-left div has 250px width and each of the
child div's have 100px width so why are they not placed one next to the other ?
my markup :
<div id="header">
<div id="header-left">
<div id="logo" />
<div id="slogan">
<span> Buy For U</span>
</div>
</div>
</div>
my css :
div#header
{
border: 1px solid black ;
height: 200px;
}
div#header div#header-left
{
display: inline-block;
height: 100%;
width: 250px;
}
div#header div#header-left div#logo
{
display: inline-block;
background: url("Google-Desktop-64.png") no-repeat center;
background-size: 25%;
height: inherit;
width: 100px;
}
div#header div#header-left div#slogan
{
display: inline-block;
height: inherit;
width:100px;
}
everything's fine. just close the logo's <div> properly. "self-closing" tags.
<div id="header">
<div id="header-left">
<div id="logo"></div>
<div id="slogan">
<span> Buy For U</span>
</div>
</div>
</div>
i also suggest using an <img> for the logo (and make it a link to homepage) rather than just a background. empty <div> tags are prone to errors during validation.
It is stange that your #header has a width of 200 pixels and the child #header-left 250 pixels, but apart from that I think it's better to use a float. This means that the two divs are next to each other:
div#header div#header-left div#logo
{
float: left;
background: url("Google-Desktop-64.png") no-repeat center;
background-size: 25%;
height: inherit;
width: 100px;
}
div#header div#header-left div#slogan
{
float: left;
height: inherit;
width:100px;
}
And you nead a clear in your html/css:
.clear_left { clear: left; }
And the html:
<div id="header">
<div id="header-left">
<div id="logo" />
<div id="slogan"><span> Buy For U</span></div>
<div class="clear_left"></div>
</div>
</div>