The div within the paragraph tag does not wrap in the paragraph tag. How do I achieve it to wrap? It floated into a new paragraph instead of being aligned within the <p> tag.
<head>
<style>
#wrapper {
width: 100%;
margin: 0 auto;
}
#leftcolumn,
#rightcolumn {
border: 1px solid white;
float: left;
min-height: 100%;
-webkit-box-shadow: 0px 1px 9px -1px rgba(0, 0, 0, 0.94);
-moz-box-shadow: 0px 1px 9px -1px rgba(0, 0, 0, 0.94);
box-shadow: 0px 1px 9px -1px rgba(0, 0, 0, 0.94);
}
#leftcolumn {
width: 75%;
}
#rightcolumn {
width: 25%px;
}
.inner-divs {
height: 50px;
width: 250px;
-webkit-box-shadow: -1px 1px 9px -1px rgba(0, 0, 0, 0.94);
-moz-box-shadow: -1px 1px 9px -1px rgba(0, 0, 0, 0.94);
box-shadow: -1px 1px 9px -1px rgba(0, 0, 0, 0.94);
}
#img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
padding-left: 10px;
}
#div-embed {
height: 50px;
width: 50px;
background-color: #27d6bf;
}
</style>
</head>
<body>
<div>
<div id="leftcolumn">
</div>
<div id="rightcolumn">
<p class="inner-divs">
<div id="div-embed"><img id="img" src="C:\Users\ken4ward\Desktop\Tidy\edit.jpg"></div>
</p>
<p class="inner-divs">
<div id="div-embed"><img id="img" src="C:\Users\ken4ward\Desktop\Tidy\garbage_delete.png"></div>
</p>
<p class="inner-divs">
<div id="div-embed"><img id="img" src="C:\Users\ken4ward\Desktop\Tidy\update.jpg"></div>
</p>
<p class="inner-divs">
<div id="div-embed"><img id="img" src="C:\Users\ken4ward\Desktop\Tidy\zoom_icon.jpg"></div>
</p>
</div>
A <div> by default is a block element (as opposed to inline elements). The same goes for <p> elements.
If you want to wrap something inside a <p> element (or any other block element), use the <span> tag, which by default is an inline element.
BUT: You can change any elements appearance by defining another setting for it's display parameter:
.my_class { display: inline-block; }
will make the div with class ".my_class appear in one line with the surrounding content. The same goes for display: inline
For more details see http://www.w3schools.com/cssref/pr_class_display.asp
P.S.: In your case you could probably simply leave the div tags out and just use the images as they are, inside the <p>tags. You can still style those with a CSS rule like
p.xxx1 img { bottom: 1px; height: 0.8 em; width: auto; }
in order to raise each image by one px and adjust it's size (.xxx1in this example would be the class that you include in the <p>tag.
Related
When you uncomment the unordered list tag the second container div falls a bit down. If you actually could explain me why this is happening and told me how to remove this behavior I would be thankful.
html,
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
margin-right: 50px;
margin-left: 50px;
margin-top: 100px;
display: inline-block;
width: 300px;
height: 300px;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
text-align: center;
color: rgb(38, 48, 90);
}
ul {
list-style-position: inside;
display: block;
}
<div class="container">
<h1> Depr </h1>
<!--<ul>
<li>Derping</li>
<li>Derping</li>
</ul>-->
</div>
<div class="container">
<h1> Derpina</h1>
</div>
The main reason behind why this occurs is, when you make any element to be inline-block, it aligns to baseline by default. So, when the heights of all elements are not same, it gets scrambled and aligned to their baseline. This is the main problem with all the inline-block and we should correct it by giving the right vertical alignment. To do that, please follow the below snippet:
I found your issue to be vertical alignment. Just give:
.container {
vertical-align: middle; /* This */
position: relative;
margin-right: 50px;
margin-left: 50px;
margin-top: 100px;
display: inline-block;
width: 300px;
height: 300px;
background-color: rgb(255,255,255);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0,
0.24);
text-align: center;
color: rgb(38, 48, 90);
}
Preview
Without the <ul> and with it:
JSBin: http://jsbin.com/zalagixovu/edit?output
Normally the elements of an HTML markup appear in the order they are written in the markup file, and the inline elements appear from left to right.
But I want the children of a certain div (only, NOT all the elements of the entire page) to appear from right to left.
In case you wonder why it is needed, I want to do this to solve the following problem:
PROBLEM:
JSFiddle here.
.wrapper {
height: 100%;
width: 826px;
margin: 50px auto;
display: table;
background-color: #003b80;
}
.cell {
display: table-cell;
vertical-align: top;
}
.left-cell {
width: 50%;
background-color: chocolate;
}
.right-cell {
background-color: darkslategrey
}
.step-container {
max-height: 200px;
font-size: 0;
}
.right-cell .step-container {
margin-top: 125px;
}
.content-box {
display: inline-block;
width: 350px;
height: 200px;
/*border: 5px solid blue;*/
font-size: 0;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
background-color: dodgerblue
}
.right-cell .content-box {
background-color: darkturquoise
}
.middle-cell {
height: 100%;
background-color: white;
width: 1.5px;
font-size: 0;
box-shadow: 0px 0px 10px black;
-moz-box-shadow: 0px 0px 10px black;
-webkit-box-shadow: 0px 0px 10px black;
}
.number-outer-container {
display: inline-block;
position: absolute;
}
.left-cell .number-outer-container {
/*margin-left:39px;*/
}
.number-inner-container {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.number-banner {
width: 50px;
height: 50px;
background-color: crimson;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.notch-outer-container {
display: inline-block;
}
.left-cell .notch-outer-container {
margin-right: 24px;
}
.right-cell .notch-outer-container {
margin-left: 10px;
}
.notch-inner-container {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.notch {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.left-face-notch {
border-right: 15px solid #520f23;
}
.right-face-notch {
border-left: 15px solid #571780;
}
<div class="wrapper">
<div class="cell left-cell" align="left">
<div class="step-container">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="right-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner"></div>
</div>
</div>
</div>
</div>
<div class="cell middle-cell"></div>
<div class="cell right-cell" align="right">
<div class="step-container">
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner"></div>
</div>
</div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="left-face-notch notch"></div>
</div>
</div>
<div class="content-box"></div>
</div>
</div>
</div>
In this SSCCE, inside .left-cell .step-container, I have three elements appearing on the same line: .content-box, .notch-outer-container, and .number-outer-container; and to make the .notch appear to be overlapping the right-cell by 50% of its width, I gave .number-outer-container a position:absolute; and .notch-outer-container a margin-right which pushes the number-outer-container to right side to an extent that it appears to be overlapping the (.middle-cell and) right-cell by 50% of it's width.
The problem is that in the .right-cell, this strategy is NOT working. First the .number-right-container appears and still it is absolute, I can not give it a left property with value relative to its parent (otherwise I would try a left:-25px to make it appear 25px behind the left edge of its parent, because it has width:50px;). Then the .notch is hidden below it...
So I am thinking about finding a way through which I can get the elements render from RTL (Right To Left) rather than LTR only inside .right-cell on the page. So that I can follow the same strategy I have used for the .left-cell, in the .right-cell.
There's numerous ways to achieve what you want using either flexing, floats or other options, but I'd say one of the easiest ways, if the rest of the layout works as you want it to, is to use the direction attribute.
div {
direction: rtl;
}
div div {
display: inline-block;
direction: ltr;
}
<div>
<div>first</div>
<div>second</div>
<div>last</div>
</div>
basically my website looks like this: http://i.imgur.com/6xcWTxR.png
I want to put that container with text in it next to the image. How can I do that, and keep it centered? I'll put my code below.
<body>
<div style="width:200px; height:516px; opacity:0.8; margin: 0px auto;"><img style="-webkit-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); -moz-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4);" src="media/images/logo.png"></div>
<div id="nav_menu" style="display:none; background: rgba(0, 0, 0, 0.72); width:300px; margin: 0px auto;">
<center>Endless Void></center>
</div>
</body>
You will more than likely have to use:
margin: 0 auto;
width: /* your width here */
to center your content along with either floating your two DIVs or absolutely positioning them.
When using margin: 0 auto; you need to supply a width value or it will not work as once the browser has a width to work with it can auto calculate the margins for you. You can apply margin: 0 auto to the <body> tag or a another wrapping element like a <div> that contains your image and text DIVs.
A <div> is a block level element that will try to take up the whole width of the page by default. That is why you need to float them or use some kind of positioning that changes that behavior and get the two elements to line up next to one another.
Here is a basic example in a jsFiddle: http://jsfiddle.net/vn34bw84/
Simply by adding inline-block and using a container:
#container {
text-align:center;
}
#container > div {
display:inline-block;
}
<div id="container">
<div style="width:200px; height:516px; opacity:0.8; margin: 0px auto;"><img style="-webkit-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); -moz-box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4); box-shadow: 0px 0px 30px 1px rgba(183,183,183, 0.4);" src="media/images/logo.png"/>
</div>
<div id="nav_menu" style="background: rgba(0, 0, 0, 0.72); width:300px; margin: 0px auto;">
Endless Void
</div>
</div>
Put this in your CSS file:
#container {width: 200px;}
#left { border: 1px dotted red; float: left; padding: 0px; margin: 0px;}
#right { border: 1px dotted red; float: right; padding: 0px; margin: 0px;}
/* I have added the border it usually helps to know where each boxes during development then later remove it. Also use padding and margin to get what you want */
And this in your HTML body
<div id='container'>
<div id='left'>
</div>
<div id='right'>
</div>
</div>
I'm making a title bar, links on the left, center, and the right. Each separated by divs.
Floating left is no problem, centering the second div is no problem. But when I try to float the last div to the right it is clearing the other divs and is not inside my header. Why is this? It has to be something simple I am missing? Thank you very much
http://jsfiddle.net/GX9xn/
HTML
<div class="header-fixed">
<div class="header-container">
<div class="nav-float-left">
<div id="search">
<span>search</span>
</div>
</div>
<div class="nav-center">
title
</div>
<div class="nav-float-right">
<a>
<span>more</span>
</a>
<div>
</div>
</div>
CSS
.header-fixed {
height:56px;
border-top: 1px solid #222;
width: 100%;
background: green;
position: fixed;
}
.header-container {
width: 700px;
margin: 0 auto;
height: 56px;
}
.nav-float-left {
float:left;
height: 56px;
color: rgba(255, 255, 255, .55);
font-family:'Museo Sans W01 300',san-serif;
font-size: 13px;
text-shadow: 0px 1px 1px rgba(0, 0, 0, .95);
filter: dropshadow(color= rgba(0, 0, 0, .95), offx=0, offy=1);
}
.nav-center {
letter-spacing: 0.05em;
margin: 0 auto;
height: 43px;
width: 100px;
padding-top: 13px;
background: black;
color: #d4d2d2;
font-size: 29px;
font-family: “Lucida Grande”, sans-serif;
text-align: center;
box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-webkit-box-shadow:inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-o-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-moz-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
cursor: pointer;
}
.nav-center .ss-pika {
font-size: 17px;
margin-left: 1px;
margin-right: 0px;
}
.nav-center a {
display:block;
}
.nav-float-right {
position:relative;
float:right;
height: 55px;
width: 205px;
}
The center div will be above the float right div because it is a block element and block elements are not placed inline.
A walk around is to add the float-right element first.
<div class="nav-float-left">
<div id="search">
<span>search</span>
</div>
</div>
<div class="nav-float-right">
<a><span>more</span></a>
<div>
<div class="nav-center">
title
</div>
If you use float you also need to set the display property in order to do as you want.
I changed your fiddle by adding display:inline-block.
As you may notice you need to set the dimensions width for your divs (height optional).
Here : Fiddle
You can use display:table; , display:table-cell; instead of floats to arrange elements in single line:
Fiddle
Try this
.nav-float-right {
position:relative;
float:right;
height: 55px;
width: 205px;
bottom: 57px;
left: 12px;
}
You can adjust the right div by set the bottom and left attributes.
Fiddel: http://jsfiddle.net/GX9xn/6/
Please try this FIDDLE
There is slight change in your CSS file
.nav-float-right {
position:absolute;
float:right;
height: 55px;
width: 205px;
right:0;
top:0;
background: #fff;
}
I have a container div which, inside, has an inner div. I would like it for my outer div to grow (in height) alongside the contents of its inner div. I've set a minimum height, however the size of the outer div never has a height different from the minimum one I have set.
This is the html:
<div id="containerDiv">
<div class="innerDiv">
<div id="header" class="layout">...</div>
<div id="mainMenu" class="layout">...</div>
<div id="content" class="layout">...</div>
<div id="footer" class="layout">...</div>
</div>
</div>
This is the CSS:
#containerDiv {
background-image: url('/Content/images/backgroundimage.png');
min-height: 760px;
width: 100%;
border-radius: 1px;
box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
overflow: auto;
}
.innerDiv{
border-radius: 1px;
-webkit-border-radius: 1px;
box-shadow: 0 0 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
position: absolute;
background-color: white;
}
This fiddle should help see my problem. The red div should be the same height as the white one. The width is ok, it is supposed to be 100%.
http://jsfiddle.net/arrsoph87/euB8H/
Based on this solution I tried setting the overflow property to auto (in the container), with no luck.
Based on this solution, I tried setting the container's property float, to left. This didn't work either.
I also tried adding right after this line
<div id="footer" class="layout">...</div>
(meaning, right before closing the inner div), to add this line based on another post
<div style="clear:both;"></div>
Also couldn't get this to work. Any suggestions?
Change overflow: auto to overflow: hidden. That oughta work.
#containerDiv {
background-image: url('/Content/images/backgroundimage.png');
min-height: 760px;
width: 100%;
border-radius: 1px;
-webkit-border-radius: 1px;
-o-border-radius: 3px;
box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
overflow: hidden; // <-------
}
This typically happens if your innerDiv is floating right or left. You seem to not have added the class definition of innerDiv.
Usually the solution to this is to add after the end tag of innerDiv (and not before it).
Ok, the problem seemed to be that the position:absolute property of the innerDiv. I changed it to relative and it worked. The following would be the relevant HTML:
<div id="containerDiv">
<div class="innerDiv">
<div id="header" class="layout">HEADER</div>
<div id="mainMenu" class="layout">MAIN MENU</div>
<div id="content" class="layout">CONTENT</div>
<div id="footer" class="layout">FOOTER</div>
</div>
</div>
And the CSS:
#containerDiv
{
background-image: url('/Content/images/backgroundimage.png');
min-height:760px;
width: 100%;
border-radius: 1px;
-webkit-border-radius: 1px;
box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
overflow:hidden; /*added*/
/* removed overflow:auto; */
}
.innerDiv
{
border-radius: 1px;
-webkit-border-radius: 1px;
box-shadow: 0 0 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
position: relative; /*added*/
/*removed position:auto;*/
left:230px; /*added*/
background-color:white;
width: 100px;
}
I placed it in this new fiddle.
http://jsfiddle.net/arrsoph87/BC5n8/