I have the following:
<!-- BLUE BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="position:absolute;left:20px;top:0;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<!-- PINK BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="position:absolute;right:20px;top:0;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
here is the image of the HTML output:
Please help me getting those divs in vertical order, I don't want them to float over each other, I want the message div to get the automatic height according to content too.
You should use floats for this. float:left , float:right and a clear:both inbetween :
<div style="width:100%;position:relative;min-height:100%;float:left">
<div style="float:left">img</div>
<div style="float:left;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">First messages go here</div>
</div>
<div style="clear:both;width:100%;position:relative;min-height:100%">
<div style="float:right">img</div>
<div style="float:right;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">messages go here</div>
</div>
You can see it in action here : jsfiddle
Remove absolute position form your message DIV. Write like this:
<div style="position:relative;">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="margin-left:20px;margin-right:20%;background-color:#2b5797; color:#fff;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<div style="position:relative;">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="margin-right:20px;margin-left:20%;background-color:#b91d47; color:#fff;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
Check this http://jsfiddle.net/y44NC/2/
Related
This one i want to display. In here i want to display all these in same way same height & width.But in here bottom part height will be larger if the title has many words.
This is my html code block
<div [style.width.%]="105" [style.height.%]="25">
<div matRipple [matRippleColor]="primary" class="m-tile">
<div class="a-tile-graph a-tile-graph--hotel">
<div class="titles">
<div class="head">{{name}}</div>
<div class="sub">{{level}}</div>
</div>
<div id="{{chartId}}" class="graph"></div>
</div>
<div class="o-tile-content" [ngStyle]="{'font-size.px':14}">
<div class="a-tile-btn"><i class="fa fa-signal"></i></div>
<div class="a-tile-title">{{name}}</div>
<div class="a-tile-value"><span class="currency">$</span>{{getFormattedValues(ttv)}}</div>
<div class="a-tile-count">{{getFormattedValues(ttc)}}</div>
</div>
</div>
</div>
how could i fix this?
My website shows different articles each in one thumbnail.
The problem is that the thumbnails seems to float everywhere. They are not aligned as it should be.
This is how my HTML code looks like.
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<br></br>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PIC]" width="300" />
<div class="caption">
<h3>
[Name]
</h3>
<p>
[Text]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The result is that the columns are not aligned. There are 3 columns next to each other, but the height differs, as well the position on the page.
How can I solve this?
Now it looks like a staircase like in the code with the
I want:
Box 1. Box2. Box 3.
Bootstrap 3 column layout will be like
<div class="col-md-12">
<div class="row">
<div class="col-md-4">.col1</div>
<div class="col-md-4">.col2</div>
<div class="col-md-4">.col3</div>
</div>
</div>
To maintain equal height for all boxes assign equal height for all images,h3 and p tags(which are in the box)
Example snippet https://bootsnipp.com/snippets/featured/store-product-layout
and in your html code there are many closing < /div> tags check html validations once.
I have this:
<div class='container'>
<div class='row'>
<div class="col-md-5 col-sm-4 col-xs-12">
text goes here
</div>
</div>
<!--//col-->
<div class='col-md- col-sm-6 col-xs-12'>
<div class='text-center'>
image goes here
</div>
</div>
</div>
Pictures will tell what I'm trying to do better. Here is what it looks like right now:
bad-pupper.png
It's lined up properly but it doesnt look good. I want to match the center of the image to the text instead.
good-pupper.png
How should I do this?
You could wrap the two content divs inside a new div. The new div you'll give a height, line-height. That way you can use vertical-align which will center the image the way you wanted
just add padding-top:somepixel to your text div
like below
.text-center {
padding-top:15px;
}
Yes You can do that,
Check this fiddle here
Sample HTML
<div class="container">
<div class="row">
<div style="display:table;">
<div style="display:table-cell;vertical-align:middle;">
<div style="margin-left:auto;margin-right:auto;">
<p>This is heading</p>
<img src="https://unsplash.it/200" alt="">
</div>
</div>
</div>
</div>
</div>
Respective CSS
p,img {
margin:20px;
display:inline-block
}
For your reference : Checkout this link
I have a page that essentially behaving as I want it, except that I would like to place an image every so often along a horizontal scroll track. This JS Fiddle shows the code: http://jsfiddle.net/bretwhiteley/39cLc0vm/
So what I am trying to do is add an image that is the height of the "Scrolling" DIV 1000px from the left. I tried to use the following code, with no luck:
<div class="Timeline_Break" style="margin-left:1000px;">
<div style="margin-left:1000px"><img src="http://s.w-x.co/TWC_logo_100x100.gif" style="width:20px;height:130px"></div>
</div>
The Styling is:
.Timeline_Break {
position: fixed;
z-index: 99;
}
test this code
jsfiddle
<div id="Header">
Google Chart ...
</div>
<div id="Map">Map</div>
<div id="Footer">
<div id="FooterLeft">
<div class="Timeline_Title">Industry</div>
<div class="Timeline_Title">Infrastructure</div>
<div class="Timeline_Title">Individuals</div>
</div>
<div id="FooterRight">
<div id="Scrolling">
<div class="Timeline_Banner">
<div style="margin-left:400px;"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div class="Timeline_Banner">
<div style="margin-left:700px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div class="Timeline_Banner">
<div style="margin-left:200px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div style="color:red;position:relative">
<div style="color:blue;position:absolute;top:0px;left:500px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:130px">
</div>
</div>
</div>
</div>
</div>
I'm trying to create two floating divs inside of another:
<div style="width:100%;height:500px;position:relative;top:15px;">
<div style="position:relative;float:left;width:58%;height:100%;left:10px;">
<div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;">
<div style="height:30px;text-align:center;position:relative; "><h2>welcome</h2></div>
<div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div>
<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
</div>
</div>
</div>
The problem is the floating div1 and div2 are outside the border of the div with id "borderdiv". What am I doing incorrectly?
Floated elements have no height, so #borderdiv does not expand to contain them.
You can use a clearing element to correct this:
<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
<div style="clear: both" />
Demo on JSFiddle.net
Since your question was not very specific, then my answer is very simple. This simply puts the div1 and div2 inside the borderdiv:
<div style="width:100%;height:500px;position:relative;top:15px;">
<div style="position:relative;float:left;width:58%;height:100%;left:10px;">
<div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;">
<div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div>
<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
<div style="height:30px;text-align:center;position:relative;"><h2>welcome</h2></div>
</div>
</div>
</div>