Hi I am having trouble getting a div to stay in place when the window is resized. It overlaps the content div when its made smaller.
#content
{
width: 70%;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
background-color: #202020;
padding: 30px;
}
#login
{
float: right;
margin-right: 20px;
margin-top: 50px;
background-color: #4A4344;
width: 200px;
height: 220px;
text-align: center;
}
I tried to set the values to em and percentages but I cannot seem to get it working.
Thanks for any advice.
This is because the content div's width is set to 70% of the browser's window, and will ignore the login div entirely. Try instead to float both the elements. If you set both element's css to float: right;, put the login before your content in the html, and remove the width property from the content's css, then it should view how you want it.
Try white-space: nowrap
Related
I'm trying to work on a images section, in which they are being rendered from the servers. There are some images which are having different heights. Because of this, I'm unable to align the images in a manner.
NOTE - I have aligned the images, using display:inline but currently not able to solve height problem.
Current condition :
What I'm trying to follow is similar to Google :
img.res-img {
max-width: 350px;
max-height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
.image-result {
padding-left: 80px;
display: inline;
}
<div class="image-result" *ngIf="Display('images')">
<div *ngFor="let item of items$|async">
<img class="res-img" src="{{item.link}}" onerror="this.style.display='none'">
</div>
</div>
It would be great, if someone can help me out with this. Thanks!
UDPATE 1 - What I did from suggestions is this -
img.res-image {
float: left;
position: relative;
width: 20%;
}
This is how it looks now, still height problem is not being able to solve!
UPDATE 2 - After going through answer, this solution seems to be working. But, the resolution of the images has been decreased and aspect ratio is not proper.
img.res-img {
width: 350px;
height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
I have removed max-width and max-height and used width and height
This is how it looks now :
Remove max-width & max-height property and add just width & height property in your css
img.res-img {
width: 350px;
height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
.image-result {
padding-left: 80px;
display: inline;
}
You need to set one thing alone, i.e. either the height or the width to keep its aspect ratio same.
In your case you need height to be same on all images so you just need to remove the max-width property like this:
img.res-img {
/*max-width: 350px;*/
max-height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
You can also refer to thee fiddle I just created: https://jsfiddle.net/387bnaer/
I have 2 divs with float:left. Both have designated widths, heights, paddings and margins. But on one of the divs the content with its paragraphs tags dramatically overflows the right edge of the div.
My CSS is set out us such:
Content in this div behaves as expected:
#upcomingevents
{
float: left;
background-color: #FFFFFF;
width: 300px;
height: 400px;
margin: 25px;
padding: 10px;
}
Content in this div overflows the right side, creating a scroll bar:
#maincontent
{
background-color: #FFFFFF;
float: left;
height: 400px;
width: 555px;
margin: 25px;
padding: 10px;
}
Both these divs are wrapped in a div that has overflow:auto
#contentinner
{
overflow: auto;
width: 1000px;
margin: auto auto 60px;
padding-top: 20px;
}
I am really puzzled as to why the #maincontent p's are behaving this way. Can anyone tell me what I'm done wrong?
it's one continuous line. Add
word-wrap: break-word;
to #textcontent > p tags to break the lines
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
I am trying to make it possible to align divs with a lot of text horizontally, so you can scroll through them horizontally. Not really experienced and I can't figure out what I am doing wrong..
Here is my css:
#content {
font-size: 18px;
text-align: justify;
display: inline-block;
vertical-align: middle;
overflow-x: auto;
height: 70%;
margin-top: 15%;
margin-bottom: 15%;
}
.item {
width: 50%;
max-height: 70%;
margin-bottom: 30px;
margin-top: 100px;
margin-left: 25%;
margin-right: 25%;
overflow: scroll;
}
Thanks!
I assume you want to put multiple .items into the #content and they should then wrap horizontally. Is that correct?
You would then need a wrapper over your #content that has a fixed width (this is going to be your 'scroll window'). The #content itself needs to be wider so that you can scroll it while the wrapper needs the property overflow-x:scroll. Since you don't know how wide your #content should be (except if you know the number of .item divs) I suggest to set it with Javascript. Finally it's important to have float: left in your .item, otherwise they won't wrap horizontally.
Additionally you could let JS set your #contents height to the heighest .item if you don't want this to be same for all .items.
Take a look at this fiddle if this is what you try to achieve.
Optionally you could use css3 columns. However you wouldn't yet use it, as you won't have any support for IE9 and below. See here how this works.
Cheers!
i am kind of new to designing stuff which is why i want to learn a bit about it..
I am having an issue with my website, what css can I use to make a Div acting as a wraper grow in terms of height as the content grows? My content is being hidden underneath the footer... as it grows
Thank you
css
.wrapper
{
width :1200px;
height: 1000px;
margin-left: auto;
margin-right: auto;
overflow :hidden;
background-color: white;
}
Change this:
.wrapper
{
width :1200px;
height: 1000px;
margin-left: auto;
margin-right: auto;
overflow :hidden;
background-color: white;
}
to this:
Change this:
.wrapper
{
width :1200px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
Your request is not entirely clear, but you could use min-height to make an element have a minimum height:
.wrapper {
width: 1200px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
http://jsfiddle.net/uQjEn/3/
And:
http://jsfiddle.net/uQjEn/2/
Never, ever use overflow: hidden with an explicit height. I know all the cool kids are using that to contain floats but you can't combine that with a height set.
Remove the overflow property or the height property.