I want to tightly wrap some divs with an outer div, such that the outer div resizes with the addition of more inner divs. Right now, the parent div just fills 100% width, which isn't quite right.
Here's some code and a Fiddle:
<div id="toolbar">
<ul>
<li><i class="icon-facebook-sign"></i></li>
<li><i class="icon-twitter-sign"></i></li>
<li><i class="icon-envelope-alt"></i></li>
<li><i class="icon-cloud-upload"></i></li>
<li><i class="icon-cog"></i></li>
</ul>
</div>
#toolbar {
overflow:hidden;
padding:5px;
background:#FFF;
border-radius:5px;
border:1px solid #AAA;
margin-bottom:15px;
}
#toolbar ul {
overflow:auto;
list-style:none;
margin:0;
padding:0;
}
#toolbar li {
display:inline;
padding:5px;
background:#606c88;
color:#FFF;
font-size:24px;
border-radius:5px;
}
Set the display-attribute of the outer div #toolbar and the list #toolbar ul to inline-block:
#toolbar {
overflow:hidden;
padding:5px;
background:#FFF;
border-radius:5px;
border:1px solid #AAA;
margin-bottom:15px;
display:inline-block;
}
#toolbar ul {
overflow:auto;
list-style:none;
margin:0;
padding:0;
display:inline-block;
}
I hope it helps...
EDIT: You said "tightly wrap". You have a padding in the toolbar-div. So if you really want to have it with no space towards the outer div, remove the line padding:5px.
#toolbar {
float: left;
}
This will "shrink wrap" the .toolbar around its contents. You'll need another element after it to clear: both; so that you don't get elements to align to the right of the .toolbar if you don't want that.
Related
I am trying to do fixed menu using flexbox. In my navigation bar I created 2 divs. First should contain logo, and second menu(with display:flex property). I've got problem, when I want to postion the li element of my menu. I want horizontal menu, but when I add justify-content:space-between my first element should be situated in left edge of menu's div but it has a small margin and I don't know why.
https://jsfiddle.net/4Lmu08yc/
header {
height:100vh;
background-color:yellow;
width:100vw;
max-width:100%;
}
.navbar {
width:100vw;
background-color:grey;
height:7vh;
max-width:100%;
position:fixed;
border-bottom:5px solid white;
z-index:2;
}
.flex_row {
display:flex;
flex-direction:row;
}
.container{
height:100%;
width:100vw;
max-width:100%;
background-color:green;
display:flex;
}
#logo {
height:100%;
background-color:white;
flex-grow:1;
}
#menu {
height:100%;
background-color:yellow;
flex-grow:1;
}
#menu ul {
list-style-type:none;
justify-content:flex-start;
align-content:flex-end;
}
#menu ul li {
border:1px solid black;
line-height:40px;
}
<header>
<div class="container">
<div class="navbar flex_row">
<div id ="logo"></div>
<div id ="menu">
<ul class="flex_row">
<li>text1</li>
<li>text2</li>
<li>text3</li>
<li>text4</li>
</ul>
</div>
</div>
</div>
</header>
You have to add margin:0; to '#menu ul'.
HTML automatically adds a margin to unorderded lists.
#menu ul {
margin:0;
}
For some reason my footer isn't moving along to the bottom of the content as it always has and I've been over my code back and forth and can't figure out the problem. I used both html and css validators and they saw no errors in my coding. I figured maybe I'm missing a quote or semi colon somewhere but I can't figure out what's causing the problem.
Here's a fiddle to show what's going on https://jsfiddle.net/Optiq/n6xmhL2j/1/
here's the HTML
<body>
<div id="front_page" class="page">
<header>WELCOME SLIDESHOW</header>
<div id="intro_links">
<a class="nav_link" href="#">New Artists</a>
<a class="nav_link" href="#">New Designs</a>
<a class="nav_link" href="#">New Garments</a>
<a class="nav_link" href="#">How it Works</a>
</div>
<div id="new_artists" class="title_01">New Artists</div>
<div class="new_artist_pane">
<div class="art_pane01">
</div>
<div class="art_pane01">
</div>
<div class="art_pane01">
</div>
</div>
</div><!--front_page-->
<footer>footer</footer>
</body>
Here's the CSS
#charset "utf-8";
/* CSS Document */
body{
margin:0;
padding:0;
height:auto;
width:100%;
display:block;
/*background-color:#36F;*/
}
header{
width:100%;
height:444px;
background-color:#999;
color:#fff;
text-align:center;
display:block;
}
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
}
.page{
width:100%;
height:auto;
margin-bottom:4%;
display:block;
}
#intro_links{
width:88%;
overflow:auto;
margin:auto;
display:block;
}
.nav_link{
width:23%;
height:137px;
float:left;
text-align:center;
text-decoration:none;
margin:4% 0 4% 2%;
display:block;
background-color:#03C;
color:#fff;
}
.title_01{
width:44%;
height:44px;
background-color:#666;
font-size:29pt;
color:#fff;
display:block;
float:left;
clear:both;
}
.new_artist_pane{
width:66%;
height:auto;
border:solid 1px #333;
float:left;
margin:4% 0 0 2%;
display:block;
}
.art_pane01{
width:100%;
height:333px;
float:left;
border:solid 1px #CCC;
margin-bottom:4%;
display:block;
}
Such cases happen when you have elements with float
Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.
add this right before closing the div :
<div style="clear:both;"></div>
</div><!--front_page-->
<footer>footer</footer>
JS Fiddle
Another- and better since we don't have to add extra markup to the page - way to do it is to add .clearFix class to the parent container div which its closing tag </div> is right before the footer, to do so change this:
<div id="front_page" class="page clearfix">
to this:
<div id="front_page" class="page clearfix">
and put this in your css:
.clearfix:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
or :before and :after:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
Here's a JS Fiddle 2 showing the above technique
more details:
https://css-tricks.com/the-how-and-why-of-clearing-floats/
http://www.positioniseverything.net/easyclearing.html
DEMO
Probably you've given float:left to every possible element and that's what disturbing it. Just add it to footer too as below:
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
float:left;//here
}
The simplest way and most succinct way to answer what you need is to just add the clear: both to the CSS.
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
clear: both; //add this here
}
There is 3 ways to do that.
FIRST.
add float:left; to the footer.
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
float:left; // add this
}
SECOND.
set display of the footer inline:block or inline-table
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:inline-block; // or display:inline-table;
}
THIRD.
add clear:both; to the footer.
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
clear:both; // add this
}
I am having extreme difficulty organizing two divs.
I have a footer, which includes two paragraphs. I want paragraph 1 hugging the left border of the footer div, and I want paragraph 2 hugging the right border of the footer div, AND these paragraphs must be on the same line.
My problem is that my divs are behaving oddly.
I have tried floating and giving widths but nothing seems to work, the paragraphs seem to keep piling on top of eachother.
Does anybody know how to resolve this? I just want to know how to write 2 paragraphs out on the same line hugging opposite borders.
HTML:
<div id='container'>
<div id='footer'>
<div id="errors">
<p>paragraph 1</p>
</div>
<div id="other">
<p>paragraph 2</p>
</div>
</div>
</div>
CSS:
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
}
JS FIDDLE which shows how my code is behaving oddly.
I have made changes to your fiddle https://jsfiddle.net/4vuywmn2/1/
You must float the errors div to the left and the other div to right and you must clear after the container around them closes.
To understand why you need to clear I suggest you read this answer
Is this what You want :
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
display:inline-block;
float:left;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
float:right;
}
<div id="container">
<div id='footer'>
<div id="errors">
<p>Paragraph 1</p>
</div>
<div id="other">
<p>Paragraph 2</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
You have to add display:inline-block; for error class, and using float : left for error, and right for other. And, on end, after other, You have to add one more div with clear:both;, how above div float will be cleared.
Try float and position attributes like this...
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
float:left;
position:absolute;
left:0px;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
float:right;
position:absolute;
right:0px;
}
try this mate, is this what you want:
#footer
{
height: 100px;
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
float: left;
margin-left:4.5%;
text-align:left;
color:red;
}
#other
{
float: right;
text-align:right;
margin-right:3%;
display:inline-block;
}
https://jsfiddle.net/4vuywmn2/5/
I have a page with three columns. They're all fluid:
#LeftColumn
{
display:table-cell;
float:left;
padding-left:0;
padding-right:16%;
padding-top:0;
padding-bottom:1%;
margin-right:1%;
margin-left:0;
margin-bottom:0;
margin-top:0;
position:static;
}
#RightColumn
{
display:table-cell;
float:right;
padding-right:0;
padding-left:16%;
padding-top:0;
padding-bottom:1%;
margin-left:1%;
margin-right:0;
margin-bottom:0;
margin-top:0;
}
#Content
{
display:table-cell;
width:auto;
}
In the page they are represented as follows:
<div id="LeftColumn">
</div>
<div id="RightColumn">
</div>
<div id="Content">
<!-- Stuff goes here -->
</div>
I've created a few pages in my project with this layout, and it worked rather well. However, there's a problem: The middle column only expands when I put text in it. Thus, when I place something such as a horizontal ruler in it, it's only as wide as the previous and following paragraphs. I want the center div (#Content) to be as wide as the space between the left and right columns (#LeftColumn, #RightColumn) Is this possible?
try giving #Content display: block. and give all three divs the same height.
that will expand to fill the empty space:
http://jsfiddle.net/HMS2s/
It helps to establish a container of the objects, so their percentiles have are based off a solid, but I imagine you'll handle the media queries. The padding shouldn't be used to create width for the middle column because it will take up space which is what I believe you were trying to do? If you want equal height columns there is a really long article on this that you should check out here.
Example of this CSS
#container{
width:80%;
float:left;
}
#leftcolumn{
float: left;
width: 33%;
background-color:green;
padding: 0 0 1% 0;
margin: 0 1% 0 0;
display: table-cell;
}
#middlecolumn{
overflow:hidden;
background-color:blue;
padding: 0 1% 1% 1%;
}
* html #middlecolumn{float:left}
* html #middlecolumn #content{width:100%;}
#rightcolumn{
float:right;
width: 33%;
background-color:red;
position:relative;
padding: 0 0 1% 0;
margin: 0 0 0 1%;
display: table-cell;
}
Delete display:table-cell; from #Content and add overflow:hidden;
Something like the following maybe?
CSS
#LeftColumn
{
display:table-cell;
float:left;
padding-left:0;
padding-right:16%;
padding-top:0;
padding-bottom:1%;
margin-right:1%;
margin-left:0;
margin-bottom:0;
margin-top:0;
position:static;
}
#RightColumn
{
display:table-cell;
float:right;
padding-right:0;
padding-left:16%;
padding-top:0;
padding-bottom:1%;
margin-left:1%;
margin-right:0;
margin-bottom:0;
margin-top:0;
}
#Content
{
overflow: hidden;
}
HTML
<div id="LeftColumn">
</div>
<div id="RightColumn">
</div>
<div id="Content" class="Content">
<!-- Stuff goes here -->
</div>
Example
I'm having a heck of a time with this and after trying to implement what I've read in dozens of posts, I'm still not having any luck with one last part of this.
What I have is a parent div that houses two rows of additional divs. The first row is a single div and contains a label with a link. The second row contains multiple divs side-by-side.
The first row (label/link) is centering just fine. What I'm having trouble with is centering the second row of divs. They are all side-by-side, but they are displaying as if I were left-justifying them.
Here is my CSS:
div.parent-container {
position:absolute;
background-color:#fff;
top:32px;
left:-1px;
width:418px;
height:67px;
border-right:solid 1px #000;
border-left:solid 1px #000;
border-bottom:solid 1px gray;
padding-left:2px;
text-align:center;
float:left;
}
div.text-label a {
position:absolute;
background-color:#fff;
font-family:Microsoft Sans Serif,Arial;
font-weight:bold;
width:417px;
height:15px;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
div.sub-container {
position:relative;
width:30px;
height:auto;
top:20px;
float:left;
padding-right:5px;
margin-left:auto;
margin-right:auto;
}
span.span-text {
position:relative;
font-weight:bold;
font-family:Microsoft Sans Serif,Arial;
font-size:11px;
width:30px;
height:auto;
}
div.img1 {
height:26px;
width:18px;
background:url(sprite.png) -72px -144px no-repeat;
margin-left:auto;
margin-right:auto;
}
div.img2 {
height:26px;
width:18px;
background:url(sprite.png) -95px -143px no-repeat;
margin-left:auto;
margin-right:auto;
}
div.img3 {
height:26px;
width:18px;
background:url(sprite.png) -117px -143px no-repeat;
margin-left:auto;
margin-right:auto;
}
div.img4 {
height:26px;
width:18px;
background:url(sprite.png) -141px -143px no-repeat;
margin-left:auto;
margin-right:auto;
}
And my HTML:
<div class="parent-container">
<div class="text-label">link to website</div>
<div id='div1' class='sub-container'><span class='span-text'>text1</span>
<div class='img1'></div>
</div>
<div id='div2' class='sub-container'><span class='span-text'>text2</span>
<div class='img2'></div>
</div>
<div id='div3' class='sub-container'><span class='span-text'>text3</span>
<div class='img3'></div>
</div>
<div id='div4' class='sub-container'><span class='span-text'>text4</span>
<div class='img4'></div>
</div>
</div>
I've tried creating an additional div to house the second row of divs, but that didn't work either.
Any help is greatly appreciated!
jsfiddle example
You want to remove the float:left from the subcontainer divs (div.sub-container) and give them a width (about 23% due to padding, margins, etc.)
Encompass the 2nd row with another container if you want to center the elements/child div's within it.
Here's a Demo
also,if you want to center an element,you need to define its width,in the demo - i've given a width of 200px. which you can change as per your preference.
CSS for the container :
.textContainer{
margin: 0 auto;
width:200px; /* can be in percentage ,say 50% */
position:relative;
overflow:hidden;
}