this is my page:
http://bit.ly/Ti6Ptr
I would change this block style from
to
How I have to do in my css?
Thanks in advance.
Just add width: 190px; to you css selector .liRecentPost a
This is how it will look
The easiest way would be for you to set the size of the div elements containing the text. Then the text will automatically flow to the next line when needed.
.imageText
{
width:someWidth;
}
<img ... />
<div class="imageText">
</div>
Without html and css isn't easy but I think that in you text ("li" or "p") you have to set a width and display block and insert into a div to align all image
example:
<div class="block">
<div class="firstCol">
<img src="img/yourimage.jpg" />
</div>
<div class="secondCol">
<p>some text</p>
</div>
</div>
css
.block{
width:600px;
height:auto;
float:left;
}
.firstCol{
width:300px;
height:auto;
float:left;
}
.secondCol{
width:300px;
height:auto;
float:left;
}
.text{
width:300px;
display:block
}
N.B. the dimension is not real is only an example
just add little css to your li
#recent_posts .ulRecentPost .liRecentPost {width:200px; padding:5px;}
Related
I had three divs inside a main div with id main_div and has css already as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
</div>
I just want to insert three divs in the main div as below
<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
So i want the div format to display the text like
breadcrumb_text dropdownlist Pagination
I tried with different css by using position attribute and various css options but could n't able to align them in a horizontal line with one div as left , one div as center and other div to right.
So can anyone let me know me know the css to place them in an horizontal line ?
This maybe help you Fiddle
#main_div > div {
width: 33%;
float: left;
}
I have modified your code little bit with spacing equally for each div and removed Position in the Main div.
Sometimes position will overlap with other div (position) based on z-index value. so if you really need use position unless not required.
#main_div{
height:10px; line-height:50px; margin-top:1px;
box-sizing:border-box;
}
#main_div > div{
width:31.1%;
float:left;
box-sizing:border-box;
border:1px solid grey;
margin-right: 10px;
display:inline-block;
}
#main_div > div:first-child{
margin-left:10px;}
<div id="main_div">
<div>
Div One should be Left(breadcrumb_text)
</div>
<div>
Div Two should be Center(dropdownlist)
</div>
<div>
Div Three should be Right(Pagination)
</div>
</div>
I think this is what you are asking for
JSFiddle
CSS
body
{
margin:0%;
}
.main_div
{
display:block;
margin:0% 5%;
width:90%;/*Just random, modify as per your requirement*/
height:300px; /*Just random, modify as per your requirement*/
background:#eee;
position:relatve;
}
.left-div, .center-div, .right-div
{
display:inline-block;
height:100%;
position:relative;
float:left;
width:33%;
border:1px solid #000;
text-align:center;
padding-top:5px;
}
HTML
<div class="main_div">
<div class="left-div">
Div One should be Left(breadcrumb_text)
</div>
<div class="center-div">
Div Two should be Center(dropdownlist)
</div>
<div class="right-div">
Div Three should be Right(Pagination)
</div>
</div>
I am trying to get two divs to sit side by side within another div, however the first div won't show up in the container div. "contactleft" wont show up inside of "contactcont". I'm not sure if it has something to do with the display:block's or not? I tried clearing the "left" one too, no luck. Anyone know whats up? Thank you!
html:
<div id="contact">
<img src="Images/contactbanner.jpg" alt="contactbanner">
</div>
<div id="contactcont">
<div id="contleft">
</div>
</div>
CSS:
#contactleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
}
#contactcont {
display:block;
clear:both;
background-color:blue;
height:350px;
width:960px;
margin-left:auto;
Margin-right:auto;
}
You have what I assume is a typo in your code. Should work correctly with the following:
<div id="contactcont">
<div id="contactleft">
</div>
</div>
See jsfiddle
You have a typo at contleft in your CSS it should be :
#contleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
}
Your HTML looks fine :
<div id="contactcont">
<div id="contleft">
inner content here
</div>
</div>
Here is the fiddle showing that.
You're actually pretty good there, I would just change your "contactLeft" to a class, and repeat "contactLeft" as many times as you need to. Here's a link to a CodePen.
Link to CodePen
Here's the HTML:
<div id="contactCont">
<p>contact Container</p>
<div class="contleft">
<p>contact Left</p>
</div>
<div class="contleft">
<p>contact Left</p>
</div>
</div>
And here's the CSS:
.contleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
border: 1px solid black;
margin-left:1px;
}
#contactCont {
display:block;
clear:both;
background-color:blue;
height:350px;
width:960px;
margin-left:auto;
Margin-right:auto;
}
Note, that I changed your banner height to 20px and stretched the screen width.
Then I just copied your second "div" inside your container in the same hierarchy to add another side by side. I added 1px of margin-left, and 1px solid black borders to exaggerate the point.
You can also reference bootstrap for some responsive sizings if you're new to this until you get to understanding the CSS and HTML elements a little more.
Get BootStrap
i'm trying to div start in center like float right or left but i didn't do this.
Please help me?
HTML
<div class="conta">
<div class="box">
<p>some text</p>
</div>
<div class="box">
<p>some text</p>
</div>
<div class="box">
<p>some text</p>
</div>
<div class="box">
<p>some text</p>
</div>
</div>
CSS
.conta{width:100%; position:relative; text-align:center}
.conta .box{float:left; width:100px; height:100px; border:1px solid #000; margin:5px;}
I want to start box in center and inline.
there is many possible ways.
One
simplest way this is: margin:0 auto but you need to have fixed width.
DEMO
Two
you can set display:inline-block; to inner element and set text-align:center to the container.
DEMO
HTML
<div>
<div></div>
</div>
CSS
div{
text-align:center;
}
div div{
display:inline-block;
background:gray;
width:200px;
height:100px;
}
Three
set position:relative to the container and position:absolute to the inner element, then set left:50% and margin-left:-100px (margin-left must be half of the width, in this case 100px).
DEMO
CSS
div{
position:relative;
}
div div{
position:absolute;
left:50%;
margin-left:-100px;
background:gray;
width:200px;
height:100px;
}
For block-level items, you can use auto margins to do this (when the item is within the document flow. When you float it, position it other than static, you are taking it out of the document flow.)
div.my-container { margin: 0 auto; }
Will do the trick :)
You can do like this also,
<div id="main" style="text-align:center">
<div id="inner" style="text-align:left;">
I want to be center left.......
</div>
</div>
Now main(outer div) aligned to center and the content div(inner) is aligned left in center. This works fine in IE. You should add margin:0 auto; to make this work in all other browsers.
.myclass{
margin:0px auto;
text-align:center
}
I use the following to display an image on the left side and any related info on the right side of the image. In some cases where description, address and other info exceed the height of the image, the text goes below the image. My question is how should I keep the text for not going under the image, but to continue like a column?
.eventphoto
{
padding:1px;
width:200px;
float:left;
margin-right:15px;
border-radius:2px;
}
.desc
{
font-size:0.8em;
line-height:13pt;
}
<div class="desc">
<img class="eventphoto" src="">
<div style="float:left;">
<p>DESCRIPTION</p>
.
.
.
</div>
</div>
This is a fairly-standard construct: the media object
In your case, if we add Nicole's styles like so:
<style>
.eventphoto
{
padding:1px;
width:200px;
margin-right:15px;
border-radius:2px;
}
.desc
{
font-size:0.8em;
line-height:13pt;
}
.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img{display:block;}
.media .imgExt{float:right; margin-left: 10px;}
</style>
(leaving the formatting to your original classes), and add a wrapper around the image with the appropriate styles:
<div class="desc media">
<div class="img">
<img class="eventphoto" src="http://placekitten.com/100/100">
</div>
<div class="bd">
<p>DESCRIPTION</p>
<p> ... </p>
</div>
</div>
All works well. See this CodePen for an example: http://codepen.io/paulroub/pen/JDsKa
Try float:left on the image and float:right on the text like:
.eventphoto
{
padding:1px;
width:200px;
float:left;
margin-right:15px;
border-radius:2px;
}
.desc
{
font-size:0.8em;
line-height:13pt;
float:right;
}
I think overflow: hidden; is your best bet. Here's a demo of it in use:
http://jsbin.com/owesiw/1/edit
I have an overflow-x:scroll and overflow-y:hidden. I have images, but when I'm trying to make it only scroll horizontally, it doesn't work? When I highlight the images and drag the highlight downwards, its scrolls down vertically.
#contents
{
margin:0 auto;
text-align:center;
width:1200px;
clear:both;
}
#image_contents
{
float:left;
height: 208px;
overflow-x:scroll;
overflow-y:hidden;
margin:0 auto;
}
.images
{
float:left;
margin:2px;
background:#000;
overflow:hidden;
position:relative;
display:inline-block;
}
<div id="contents">
<div id="image_contents">
<div class="images">
<img src="1.jpg"/>
</div>
<div class="images">
<img src="2.jpg"/>
</div>
<div class="images">
<img src="3.jpg"/>
</div>
<!-- and so forth !->
</div>
</div>
The best way to do this, to my knowledge, would be to create another div inside the image_contents div. Then give this div the width of all the images (with JavaScript if necessary).
Another solution would be to use display:table-cell on the images inside another div with display:table-row.
Or (dare I say it) use a table.