I am building a backend for a website and I got a strange behavior of display table/cell/row
My fiddle: http://jsfiddle.net/5G9nJ/
html
<div id="App">
<div id="AppFrame">
<div id="AppMenu">
<div id="AppMenuContent">test</div>
<div id="AppMenuLog">test</div>
</div>
</div>
</div>
css:
html, body{
height: 100%;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-color: #ebebeb;
font-family:Helvetica;
}
#App{
height: 100%;
display: table;
margin-left: 0px;
margin-top: 0px;
}
#AppFrame{
display: table-row;
height: 100%;
margin-top: 0px;
}
#AppMenu{
height: 100%;
width: 300px;
margin-top: 0px;
display: table-cell;
}
#AppMenuContent{
max-width: 65px;
height: 100%;
background-color: red;
}
#AppMenuLog{
margin-left: 65px;
width: 200px;
height: 100%;
background-color: #999999;
}
#AppDisplay{
display: table-cell;
height: 100%;
}
The problem is that, the div "AppMenuLog" will not appear next to the div "AppMenuContent"! I've tried to set the both divs to blocks, changed the width and heights but nothing solves this, can anyone help me?
You need to add display: inline-block to #AppMenuContent and #AppMenuLog.
Here's a JSFiddle.
This is a lot better and easier than using float: left; see the reason here.
If you want to go with the table structure check this
DEMO
display:table-cell; needs to be added to #AppMenuLog and #AppMenuContent
DEMO
You need to add float:left to div #AppMenuContent
#AppMenuContent {
background-color: #FF0000;
float: left;
height: 100%;
max-width: 65px;
}
Next time try to search harder an answer. On this is are a lot of questions similar with your. You need to use float:left;
Here you find your solution http://jsfiddle.net/5G9nJ/5/
Related
Total newbie here, tried to google my issue, even get on the second page of results... I'm stuck on resizing image and I have no idea why it is not working, hoping someone can help. By using Inspect on Chrome I can see that element for img is not being connected to the img and I have no idea why.
Block below is within <main>
<article>
<section class="article-content">
<img src="./assets/images/page_screenshot.png" alt=""/>
</section>
</article>
Here is CSS that I have for the whole part.
main {
display: inline-block;
background-color: var(--main-bgc);
padding-top: 5%;
}
article {
display: flex;
margin-bottom: 3%;
width: 100%;
}
.article-title {
display: inline-block;
width: 9%;
margin-right: 1%;
color: var(--font-colot-slate);
border-right: 1px solid var(--font-color-white);
}
.article-title h2 {
float: right;
margin-right: 10px;
}
.article-content {
display: inline-block;
width: 90%;
float: right;
color: var(--font-color-white);
}
.article-content img {
width: 100px;
height: 100px;
}
I tried adding height and width in tag and works fine, but not very happy with that solution.
The code you've given us works fine, as you can see in this snippet (run it to see the result). So if your image is not being properly resized, it must be because of some other part of your code, which you haven't included.
If you want the image to retain its original aspect ratio, you can add object-fit: cover; which will crop the image rather than squash it.
article {
display: flex;
margin-bottom: 3%;
width: 100%;
}
.article-content {
display: inline-block;
width: 90%;
float: right;
color: var(--font-color-white);
}
.article-content img {
width: 100px;
height: 100px;
object-fit: cover;
}
<article>
<section class="article-content">
<img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg">
</section>
</article>
I am facing a same problem. I'm trying to create two separate rows (marked as red background color) to be aligned horizontally in the center. One of the row on the left side of center part, and second one on the right side of the center part.
Do I need to add something or change some values? I've been trying to do this for 2 hours now.
Any help will be appreciated. Thank you :)
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px auto;
height: 300px;
width:50%;
display-inline-block;
text-align:center;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
Worked for me just by removing float:left; and add display:table-cell; to .others p.
Fiddle
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:table-cell;
}
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:inline-block;
}
i think you shouldnt use <p> for positioning.
use <div> instead.
also using float:left or float:right might solve your problem.
Read up on using floating items here:
http://www.w3schools.com/cssref/pr_class_float.asp
Also, when using floats, browsers will assume there is nothing inside your 'container' <div>.
So i'd also suggest you read up on using css attribute overflow.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
.others
{
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
#leftside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: left;
background-color: red;
}
#rightside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: right;
background-color: green;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
You just need to provide to p a width value because you are floating the p elements to the left, every p element into the container will get out of the normal document flow and flow from left to right.
Just add width: 50% to every p element. like this:
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
width:50%;
}
Also provide a clearfix or overflow:hidden; to the .others in order to contain the floated elements within it's body.
Here is a demo to work with
Edit: Almost forgot. If you want to gain control onto your layout, provide also a min-width and a max-width value to the body container, so it doesn't strech to much on wide screens, nor it is contained to much on narrower screens. Also, try a css framework, like bootstrap. It will give you fine control onto your layout.
Cheers!
I have 5 <div> elements and they all float left.
How can I push UP my last div? (i cant use 2 more wrappers because they will be re-sized with jQuery, all 5 of them must be in same wrapper)
I don't know if I explain my problem in a right way so if you have question, please ask.
HTML:
<div id="ModeliSadrzajAir">
<div class="kocka220x140">1</div>
<div class="kocka220x140">2</div>
<div class="kocka220x300">3</div>
<div class="kocka220x300">4</div>
<div class="kocka460x140">5</div>
</div>
CSS:
#ModeliSadrzajAir {
width: 960px;
margin: -60px 0px 0px -10px;
min-height: 500px;
background-color: #00FFFF;
position: absolute;
z-index: 1000;
}
.kocka220x140 {
border-radius:5px;
width: 220px;
margin: 10px;
height: 140px;
float: left;
background-color: #FFFF00;
}
.kocka220x300 {
border-radius: 5px;
width: 220px;
margin: 10px;
height: 300px;
float: left;
background-color: #FF0000;
}
.kocka460x140 {
border-radius: 5px;
width: 460px;
margin: 10px;
height: 140px;
float: left;
background-color: #FF0000;
}
Fiddle
You've to set your .kocka220x300's float property from left to right
I also suggest you to change your html to this
<div id="ModeliSadrzajAir">
<div class="kocka220x140">1</div>
<div class="kocka220x140">2</div>
<div class="kocka220x300">4</div> <!-- This comes first -->
<div class="kocka220x300">3</div> <!-- This comes second -->
<div class="kocka460x140">5</div>
</div>
This way, your 3 is on the left side of 4, check the fiddle link for the update
You can try this http://jsfiddle.net/modaloda/czz2Z/9/
.kocka460x140
{
border-radius: 5px;
width: 460px;
margin: 10px;
height: 140px;
float: left;
background-color: #FF0000;
position: absolute;
top: 160px;
}
I tried to reproduce your example.
Basically I think you need one wrapper with position:relative; that contains all divs and make the 5th div position:absolute; and bottom:0px;. Also add overflow:auto; so that the max height you have contained in your parent div will push the parent div's height (read it again you will understand :P).
Check this fiddle:
http://jsfiddle.net/R8hJ3/1/
Have You Tried Some plugins like Grid-a-licious..
if not try it out.. Else if you need a pure Css you could have a look the link below..
jsfiddle.net/chermanarun/HaV29/
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.
I have a web page with one big container for the entire page. Inside that <div> I have another <div> with float:left. Then, floating to the right of that child <div> I have a second container that will contain other <div>s. The secondary container is collapsing. I have searched and tried other solutions, but they didn't solve anything. BTW this is an html5 page <!DOCTYPE html>. Any ideas?
CSS:
body {
border: 0px;
padding: 0px;
margin: 0px;
background: white;
overflow: hidden;
height: 100%;
font-family: Hanuman;
}
#container {
margin: 0 auto;
background: red;
height: 100%;
width: 100%;
overflow: hidden;
}
#bibletree {
padding: 0;
margin: 0;
height: 100%;
width: 15%;
float: left;
background: blue;
overflow: auto;
white-space:nowrap;
}
#container2 {
margin: 0 auto;
height: 100%;
width: 85%;
background: gray;
float: right;
overflow: auto;
}
html:
<div id="container">
<div id="bibletree">
stuff here
</div>
<div id="container2">
there will be two other divs here as well. This one is collapsing.
</div>
</div>
Hi now give to body and html height 100%
As like this
body, html{
height:100%;
}
Demo
Does This solve the problem?
(adding overflow:hidden to #container2's rules?)