I am currently developing my own website. The first div container integrates a image to html. The second div with the classname "face" should show up directly beneath the image. It contains a text with predefined width and height.
Now the problem: It does not show up on the right of the image div. How can I show it on the right side?
.face {
text-align: center;
background-image: linear-gradient(rgb(0, 21, 166), #115FD8);
border-radius: 5px;
width: 240px;
height: 80px;
margin-right: 0 !important;
}
.start {
margin-right: 10px;
}
.postpreview {
position: relative;
width: auto;
}
.one-half {
float: left;
width: 48.717948717948715%;
margin-left: 2.564102564102564%;
}
<div class="one-half start postpreview">
<a href="#">
<img src="http://vocaloid.de/wp-content/uploads/2015/02/KAITO-6th-anniversary-2015-Project-DIVA-Arcade-Diamond-Dust-750x256.jpg" class="attachment-Beitragsbild wp-post-image">
</a>
</div>
<div class="face">Facebook
</div>
This should help. http://jsfiddle.net/13m3vbu1/3/
Insert into your css:
.face {
text-align: center;
background-image: linear-gradient(rgb(0, 21, 166), #115FD8);
border-radius: 5px;
width: 240px;
height: 80px;
float: left;
margin-right: 0 !important;
}
.one-half {
float: left;
width: 48.717948717948715%;
margin-left: 2.564102564102564%;
margin-right: 10px;
}
.one-half > a {
display: block;
width: 100%;
overflow: hidden;
}
I removed the redundant CSS that isn't needed as well.
If you just want the div with a class face to show on the right side of div one-half use float: left and instead of using pixels in .face use percent it's more flexible
CSS
.one-half {
float:left;
width: 45%; //adjust in what % you want
display: inline;
}
.face {
float: left;
width: 45%; //adjust in what % you want
display: inline;
}
Related
I have 3 divs, main, right and left. The main div contains the right and left div and I want to align the right and left div side by side. I have read few posts here but have not been able to get the desired results.
https://jsbin.com/lagikaxiwe/edit?html,css,output
html,
body {
margin: 0;
padding: 0;
}
div#main-content {
background-color: bisque;
height: 100%;
}
div#right-content {
position: relative;
width: 35%;
height: 100%;
background-color: #ffffff;
}
div#left-content {
position: absolute;
width: calc(100% - 35%);
height: 100%;
margin: 0px 0px 0px 666px;
background-color: #00aeef;
}
<div id="main-content">
<div id="right-content">
</div>
<div id="left-content">
</div>
</div>
The simplest method nowadays to use display: flex on the container. Have a look at the settings in my snippet - I erased a lot of the other settings, which are not necessary...
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
div#main-content {
background-color: bisque;
height: 100%;
display: flex;
}
div#right-content {
width: 35%;
height: 100%;
background-color: red;
}
div#left-content {
width: 65%;
height: 100%;
background-color: #00aeef;
}
<div id="main-content">
<div id="right-content">
</div>
<div id="left-content">
</div>
</div>
html,
body {
margin: 0;
padding: 0;
}
div#main-content {
background-color: bisque;
height: 100%;
width: 100%;
}
div#right-content {
float: left;
width: 35%;
height: 100%;
background-color: #ffffff;
}
div#left-content {
width: calc(100% - 35%);
height: 100%;
background-color: #00aeef;
float: left;
}
I would personally use display:inline-block to align the left and right divs
side by side and add the necessary widths to add up to 100% of the parent width. Be sure to use font-size:0 on the parent to eliminate the white space between the left and right divs so they sit next to each other correctly.
Be sure to assign font-sizes to your left and right content so your content actually shows up!
This method is largely backwards compatible with all browsers.
div#main-content{
font-size:0;
}
div#left-content{
display:inline-block;
vertical-align:top;
width:65%;
}
div#right-content{
display:inline-block;
vertical-align:top;
width:35%;
}
RE this on eBay: http://www.ebay.com/itm/281670060888
On my own site (at http://sallymilo.com/template-din.html) and when running on my own computer, the right side div aligns to the top of the left side div, but when I put it on eBay, the right side div is below the left - even if I make the tabbed section 200 pixels narrower.
A bit of the main CSS:
.row1 {
width: 100%;
position: relative;
float: left;
background: url(https://myimagefiles.com/dinnerman/tbg.png);
}
.row1l {
width: 26%;
position: relative;
margin-left: 2em;
float: left;
}
.row1r {
width: 64%;
position: relative;
margin-left: 2em;
margin-right: 2em;
float: left;
}
And a bit of the tabbed section CSS:
.tabholder {
width: 100%;
height: 14em;
font-size: 16px;
}
/* base font size for em-scaling */
.tabholder div.tabtops {
width: 100%;
max-width: 550px;
}
The issue is that in ebay the width of the container is lower than 1000px.
The because of the fact that your inner sections with hardcoded widths they break.
I suggest you to use width with %, in that way not matter what will be the with of the container the inner sections will take the number of the percentage that you gave.
.container {
margin: 20px;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
}
.col-1 {
width: 20%;
background-color: rgba(0,0,0,0.2);
float: left;
}
.col-2{
width: 80%;
background-color: rgba(0,0,0,0.5);
float: left
}
<div class="container">
<div class="col-1">col-1</div>
<div class="col-2">col-2</div>
</div>
I have trouble coding a 1px horizontal seperator line with a logo displayed in the center as pure CSS. Should look like this:
Divider with logo centered
There is a problem with multiple instances: When I add more dividers on a single page only one or two will be displayed with a line, the others will just display the logo.
A question about a centered logo was answered here - but none adressed the bug that happens with multiple instances: Divider with centred image in CSS?
Here is a adapted solution out of that discussion, fiddle below.
CSS:
body {
margin: 0;
background: white;
}
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
.logo {
position: relative; /* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 40px;
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
HTML:
<body>
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logo">
</div>
</header>
</body>
The fiddle:
http://jsbin.com/delixecobi/edit?html,css,output
I totally changed the CSS. Give the .logo a position: relative and :after a position: absolute. You are using it for one single header. That's why it didn't work.
body {
margin: 0;
background: white;
}
.logo:after {
content: ' ';
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
margin-top: -1px;
left: -50%;
width: 200%;
}
.logo {
position: relative; /* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 40px;
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logo">
</div>
</header>
Preview
If you want the line not to cross or cut, use a negative z-index.
I found a solution also for my question how to get text centered within the div - thanks to web-tiki for his approach here: Line before and after title over image
In the JSBin I put all together and formatted / commented it a bit to make it easy to work with. You will find:
divider formats with img, text and text in multiple lines
stable in multiple instances
body {
margin: 0;
background: white;
}
.logo:after {
content: ' ';
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
margin-top: -1px;
left: -50%;
width: 200%;
z-index: -1;
}
.logo {
position: relative;
/* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 20px;
/* also padding between line and logo */
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
.logotext {
width: 100%;
margin: 20 auto;
overflow: hidden;
text-align: center;
font-weight: 300;
color: green;
/* color text */
}
.logotext:before,
.logotext:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 20 0 -55%;
/* 2nd no: space text to line on the left */
vertical-align: middle;
border-bottom: 1px solid #ccc;
/* last: color line */
}
.logotext:after {
margin: 0 -55% 0 20;
/* last no: space text to line on the right */
}
span {
display: inline-block;
vertical-align: middle;
}
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logotext">
somesome</div>
<div class="logotext">
somesome</div>
</header>
One major drawback to this solution is that it does not allow the width of the line to be defined to % of the main viewport.
I'm trying to layout a screen using div's and CSS. It's a simple layout at this point but I can't seem to get the div's to line up. I want one wrapper div with two div's within it: one aligned to the left and one aligned to the right. However, they end up on top of each other.
I know this question is simple. What am I missing here?
If I reduce the width of the right div to 60% it lines up right but shouldn't I be able to use 100% of the width of the parent div?
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Float left your children elements:
jsBin demo
#product_wrapper > *{float:left;}
Note that inline-block causes the inner elements to actually act like inline elements
where white spaces count!
SO another way would be to modify your HTML removing the NewLine separator:
jsBin demo
<div id="images_wrapper">
Foo content
</div><div id="content_wrapper">
^^-------------------------------------- no space here
Bar content
</div>
The third way (the worst one) is to set font-size to 0 for the parent (will remove logically the child's white-space gap since is now '0'); >> and than reset the font-size for children elements to px (cause em will not work since parent has 0).
But that's a good way to loose track of dynamic and responsive font sizes expecially if you use em and size inheritances.
The problem is the whitespace in the html, which occupies some space between the elements.
One way of fixing it is
#product_wrapper {
font-size: 0; /* Hide whitespace in the html */
}
#images_wrapper, #content_wrapper {
font-size: 16px; /* Reset to whatever vaue */
}
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
font-size: 0;
}
#images_wrapper, #content_wrapper {
font-size: 16px;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Use float:left instead of display:inline-block
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
float:left;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
float:left;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
I'm struggling to set an img's height inside a div to be taler than the other img's on the rest of my site, can anyone advise, thanks
Here is the HTML
<div class="project">
<img src="../../../Images/Nu Space/Nu Space LH.jpg" alt="Nu Space LH" class="image" height="auto" width="580">
<img src="../../../Images/Nu Space/Nu Space BC.jpg" alt="Nu Space BC" class="image" height="auto" width="580">
<div class="clear"></div>
</div>
Here is the CSS
img {
float: right;
margin-top: 0px;
height: auto;
}
img li {
margin-top: 75px;
height: 100%;
width: 100%;
}
.project {
width: 700px;
min-height: 100%;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 30px;
left: auto;
background-color: #FFF;
}
Any help would be appreciated
try this one,
.project
{
width: 700px;
min-height: 100%;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 30px;
left: auto;
background-color: #FFF;
}
.project .image1
{
width:200px;
height: 200px;
}
http://jsfiddle.net/tT8JH/2/
div > img {
width: (desired width in %);
height: (desired height in %):
}
Edit: Sorry I was not exact in my explanations, but this will change only the images inside a div, which was what the author wanted. I believe he has other images on the webpage, which should have different size.