I have two that I need horizontally centered to each other, wrapped in a single div. can you please explain what I am doing wrong?
My HTML
<div id="center">
<div id="logo"><img src="images/blackcat_logo.png" width="200px"></div>
<nav>
<ul>
<li>SHOP</li>
<li>ARTIST</li>
<li>SERVICES</li>
<li>FAQs</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
My CSS:
header{
height:500px;
width:auto;
background-image:url(images/headerphoto.png);
text-align:center;
}
#center{
width:960px;
margin:auto;
overflow:hidden;
display:inline-block;
}
#logo{
float:left;
display:inline-block;
}
nav{
float:right;
display:inline-block;
}
#center {
text-align:center;
}
#logo, nav {
display: inline-block;
}
The above code works for me http://www.cssdesk.com/QKNNj .
Remove the float from #logo and nav. Then set your #center div to text-align:center;
#center {
width:960px;
margin:auto;
overflow:hidden;
display:inline-block;
text-align:center;
}
Is that what you had in mind?
Your full CSS should be:
#center {
width:960px;
margin:0 auto;
overflow:hidden;
left:0;
right:0;
text-align:center;
}
Related
i want to make responsive image slider but i change #wrapper ul width to max-width so responsive doesn't work.I do not know what to do.It does not work well.please help me for this problem.
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.after::after{
content:'';
display:block;
clear:both;
}
#main{
position:relative;
width:100%;
background:yellow;
margin-top:30px;
}
#wrapper{
position:relative;
max-width:800px;
margin:0 auto;
overflow:hidden;
}
#wrapper ul{
padding:0;
margin:0;
list-style-type:none;
max-width:3200px;/* it doesn't work*/
}
#wrapper ul li{
width:800px;
height:400px;
float:left;
}
<html>
<body>
<div id="main" class="after">
<div id="wrapper" class="after">
<ul class="after">
<li style="background:red;"><img src="http://via.placeholder.com/800x400" /></li>
<li style="background:green;"></li>
<li style="background:blue;"></li>
<li style="background:purple;"></li>
</ul>
</div>
</div>
</body>
</html>
You've set the max-width in your #wrapper to 800px.
You've set the max-width of the #wrapper ul to 3200px.
I might be mistaken, but logically speaking the ul will only ever reach 800px because the max width of the wrapper that it is inside is set to 800px.
#wrapper ul li {
/* width: 800px; remove it */
height: 400px;
/* float: left; remove it */
}
And add #wrapper ul li img { max-width : 100% }
Everything will be responsive perfectly.
Full code
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.after::after{
content:'';
display:block;
clear:both;
}
#main{
position:relative;
width:100%;
background:yellow;
margin-top:30px;
}
#wrapper{
position:relative;
max-width:800px;
margin:0 auto;
overflow:hidden;
}
#wrapper ul{
padding:0;
margin:0;
list-style-type:none;
max-width:3200px;/* it doesn't work*/
}
#wrapper ul li{
height:400px;
}
#wrapper ul li img { max-width : 100% }
<html>
<body>
<div id="main" class="after">
<div id="wrapper" class="after">
<ul class="after">
<li style="background:red;"><img src="http://via.placeholder.com/800x400" /></li>
<li style="background:green;"></li>
<li style="background:blue;"></li>
<li style="background:purple;"></li>
</ul>
</div>
</div>
</body>
</html>
I have a simple problem with a menu, its a 2 part menu : on the left, a traditional UL. On the right, a link contained in a div.
The right div has fixed width. The left div must take all remaining space.
I tried the overflow:hidden technique, to no avail
https://coderwall.com/p/0ph8lg/overflow-hidden-trick-to-fill-remaining-width
https://jsfiddle.net/3gfqyux4/
.container {
width:800px;
height:50px;
}
.left-menu {
background-color:red;
width:auto;
height:50px;
overflow:hidden;
}
.left-menu ul li {
display:inline;
}
.right-menu {
background-color:blue;
float:right;
width:100px;
height:50px;
}
Use calc
.container {
width:800px;
height:50px;
}
.left-menu {
background-color:red;
width:150px;
height:50px;
float:left;
}
.left-menu ul li {
display:inline;
}
.right-menu {
background-color:blue;
width:calc(100% - 150px);
height:50px;
}
Updated your fiddle: https://jsfiddle.net/3gfqyux4/3/
I assume you mean your "right" div has a fixed width (as indicated in your code) and that the left div should take up the remaining width.
flexbox can do that.
.container {
width: 80%;
height: 50px;
display: flex;
}
.left-menu {
background-color: red;
flex: 1 0 auto;
}
.left-menu ul li {
display: inline;
}
.right-menu {
background: green;
flex: 0 1 100px;
}
<div class="container">
<div class="left-menu">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
<div class="right-menu">
<a href="xyz.com">
xyz.com
</a>
</div>
</div>
JSfiddle Demo
CSS-Tricks: Complete Guide
if you don't change the order: remember display:inline-block;
.container {
width:800px;
height:50px;
}
.left-menu {
background-color:red;
width:calc(100% - 100px);
height:50px;
/*overflow:hidden;*/
display:inline-block;
}
.left-menu ul li {
display:inline;
}
.right-menu {
background-color:blue;
float:right;
width:100px;
height:50px;
display:inline-block;
}
Change an order of this two lists ;)
<div class="container">
<div class="right-menu">
<a href="xyz.com">
xyz.com
</a>
</div>
<div class="left-menu">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
https://jsfiddle.net/3gfqyux4/2/
Hi i don't know how to center div in footer or float it right or left because my footer falls apart.
Here is my code:
<div id="footer"><div id="tab_brand"><ul>
<li><img src="footer_slike/dell_footer.png"/></li>
</ul>
<ul>
<li><img src="footer_slike/acer_footer.png"/></li>
</ul></div>
</div>
css code
#footer{
background-color:grey;
width:100%;
height:auto;
margin:0;
padding:0;
left:0;
clear:both;
opacity:0.8;
}
#tab_brand{
height:100%;
left: 20px;
border:1px solid white;
}
#tab_brand ul li img{
padding:5px;
}
#tab_brand ul{
display: inline-table;
list-style: none;
height:auto;
width:auto;
}
thanks
If you want to center #tab_brand you need to set a width to it and add "margin: 0 auto" to center it.
Here is an example:
http://jsfiddle.net/ok7Lyp2n/
I have the following:
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
CSS:
div {
height: 178px;
}
#wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
#left, #center, #right {
display: table-cell;
}
#center {
width: 1100px;
}
#left {
background: url(left.gif) repeat-x;
}
#center {
background: url(center.gif) no-repeat center center;
}
#right {
background: url(right.gif) repeat-x;
}
See: fiddle
I want to put a horizontal menu in orange part of center section and another horizontal menu in yellow part;
I tried this:
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="center">
<ul id="menu1">
<li>Home</li>
<li>What We Do</li>
<li>Locations</li>
<li>Partnerships</li>
<li>Contact</li>
</ul>
<ul id="menu2">
<li>Home</li>
<li>What We Do</li>
<li>Locations</li>
<li>Partnerships</li>
<li>Contact</li>
</ul>
</div>
<div id="right"></div>
</div>
Added CSS:
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}
See: fiddle
But no had no success, please help!
You can use relative positioning (https://developer.mozilla.org/en-US/docs/Web/CSS/position#Relative_positioning) e.g.
http://jsfiddle.net/67UWv/
css
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:85px;
right:30px;
}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:110px;
right:30px;
}
edit - related to last comments
in order to remove the white spacing around the menu image it is required to set margin:0 for the body element to override the default user agent style rules.
body{
margin:0px;
}
http://jsfiddle.net/67UWv/1/
edit - response to the latest comments
The white gap noticed was caused in ff from the beginning (test original fiddle http://jsfiddle.net/6GE3x/27/show/ ) when content was placed within #center div. So there is some issue there when using display:table and display:table-cell and also adding content.
In order to avoid using an actual table for layout and all the consequences related to them, it is possible to position the center part using absolute layout as follows,
http://jsfiddle.net/eH2m6/show/
http://jsfiddle.net/eH2m6/
css
div {
height: 178px;
}
#wrapper {
/* display: table;
table-layout: fixed; */
width: 100%;
}
#left, #right {
/* display: table-cell; */
/*the following will make #left and #right take full width*/
float:left;
width:50%;
}
#center {
width: 1100px;
/*the following will position #center in the center*/
position:absolute;
left:50%;
margin-left:-550px;
}
#left {
background: url(http://dentaliran.ir/left.gif) repeat-x;
}
#center {
background: url(http://dentaliran.ir/center.gif) no-repeat center center;
}
#right {
background: url(http://dentaliran.ir/right.gif) repeat-x;
}
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:85px;
right:30px;
}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:110px;
right:30px;
}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}
body{
margin:0px;
}
has been tested in ie8,ie9,chrome32.x,ff25.x
here is the code
http://jsfiddle.net/77NBM/12/
two grey squeares ("float 1" and "float 2") have to be positioned beside each other in absolute positioned division "submenu_container" related to < li > "menu 3".
Can plz somebody help me to get it? :(
Thx!
If you'll always have two elements ("float1 and float2") of 100px each, you can set the width of .submenu_container to 220px and they will float beside each other. like this http://jsfiddle.net/77NBM/13/
If the width of the elements ("float1 and float2") is dynamic, I suggest you set the width of .submenu_container dynamicly width javascript or jQuery. for example:
$('#main_menu li').each(function(index) {
var menuWidth=0;
$(this).children().children().each(function(index) {
menuWidth+=$(this).outerWidth();
}
$(this).children('.submenu_item').width(menuWidth)
});
The width of your submenu is being constrained by the width of your li element, just add some width to your submenu and they should float:left naturally
CSS
#top{
width:500px;
height:300px;
position:relative;
margin:0px auto;
background:#ccc;
}
#navigation{
position:absolute;
width:100%;
height:50px;
top:250px;
left:0px;
background:#f00
}
#main_menu{
width:auto;
height:50px;
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
#main_menu li{
width:100px;
height:50px;
margin-right:10px;
float:left;
background:#ff0;
position:relative;
}
#main_menu li a{
display:block;
width:inherit;
height:inherit;
}
.submenu_container{
position:absolute;
background:#00f;
padding:5px;
left:-5px;
width:275px;
}
.submenu_item{
width:100px;
height:100px;
float:left;
background:#eee;
margin:5px;
}
http://jsfiddle.net/77NBM/17/
By the way, your html markup is full of errors, you need to take a look at that.
HTML
<div id="top" class="center">
<div id="navigation">
<ul id="main_menu">
<li>
Menu 1
</li>
<li>
Menu 2
</li>
<li>
Menu 3
<div class="submenu_container">
<div class="submenu_item">
Float 1
</div>
<div class="submenu_item">
Float 2
</div>
</div>
</li>
<li>
Menu 4
</li>
</ul>
</div>
</div>
#top{
width:500px;
height:300px;
position:relative;
margin:0px auto;
background:#ccc;
}
#navigation{
position:absolute;
width:100%;
height:50px;
top:250px;
left:0px;
background:#f00
}
#main_menu{
width:auto;
height:50px;
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
#main_menu li{
width:100px;
height:50px;
margin-right:10px;
float:left;
background:#ff0;
}
#main_menu li a{
display:block;
width:inherit;
height:inherit;
}
.submenu_container{
width:auto;
position:absolute;
background:#00f;
padding:5px;
left:-5px;
}
.submenu_item{
width:100px;
height:100px;
float:left;
background:#eee;
margin:5px;
}