I would like to add a padding around a text placed inside a div
so that there is some place between the divs border and the text.
I have found an interesting post about that.
But somehow all the given examples expand my div so it does not fit in the entire layout anymore.
I have used that css code for the div:
.cell {
width:30%;
height:100%;
background-color:orange;
outline:10px solid black;
}
That code gives me the following result:
The orange colored area is the div I want to have the text positioned in.
All the solutions keep expanding the div with borders so the layout expands and that is what I am trying to avoid to.
So I have tried to add padding (that should be inside the div):
.cell {
width:30%;
height:100%;
background:orange;
padding: 10%;
}
Gave me the result:
Perhaps the problem is that I am using jQuery BigText to make the text fitting into the div:
jQuery:
$(function() {
$(window).on('resize', function() {
$(".area_competences_text").bigText();
});
$(window).trigger('resize');
});
Html:
<div class ="cell">
<div class="area_competences_text text_software">
<div class="referencesProductHeader">
HEADER TEXT
</div>
<ul class="listStyle">
<li>Some Text</li>
<li>Some Text</li>
<li>Some Text</li>
<li>Some Text</li>
<li>Some Text</li>
</ul>
</div>
</div>
You are probably looking for box-sizing:border-box, it makes the element include the padding in the width so it dosent expand on extra added padding.
Code:
.cell {
box-sizing:border-box;
width:30%;
height:100%;
background:orange;
padding: 10%;
}
Example
This is the expected behavior. You may want to learn about the CSS box model.
Basically, width and height are not the total width and height of the div. Padding, borders, and margin all need to be accounted for when calculating how big you want the div.
You can use box-sizing:border-box; to change this, or adjust the width and height values.
Related
I two divs set within a parent div - a sidebar on the left & a content area to the right of that. I need to set the position of my content area (which has a fixed width) to always be 15px to the right of the sidebar (even as the browser window / sidebar stretches).
Setting the sidebar with position: absolute & a % width worked perfectly for the sidebar itself, but as the sidebar position is then absolute, the content doesn't recognise where the sidebar is & can't be positioned relative to it with CSS.
Here is an image of what I am trying to achieve:
Why are you using position absolute for the side bar?
I would just do it like this
<div class="container">
<div class="sidebar">
<p>This is your sidebar</p>
</div>
<div class="content">
<p>This is your content</p>
</div>
</div>
.container {width:100%; height: 1000px; background:blue;} /*didn't supply a width*/
.sidebar {width:25%; float:left; min-height:200px; background:lightblue; margin-right:15px;} /*you said sidebar has a % width*/
.content {width:250px; height:200px; background:red; float:left;} /*you said content had fixed width*/
Link to JS Fiddle to have a look
Unless I'm not understanding your question?
I'm trying to make a menu that opens to the right side of the the div that's clicked to activate it. However, I don't understand how I can do the positioning correctly. I would like the bottom of the last li (where I store the submenu options) to be even with the bottom of the div that activates the popout. However, giving is a negative margin
ul.dd{
z-index:100;
position:relative;
margin-bottom:-30px;
display:none;
}
isn't working out. How can I accomplish this
http://jsfiddle.net/mBPfG/1/
Thanks!
Your container div was preventing the hidden <ul> tag from floating to the right of the other. Also added a negative margin-top to adjust positioning.
I have updated the jsfiddle.
I simply added:
.dd_container { width:600px; }
ul.dd{
z-index:100;
position:relative;
margin-top:-60px;
display:none;
}
However, I would suggest nesting your second <ul> within the first <li>.
I have modified the HTML and CSS completely to have a more symatically correct answer.
<div id="dd_container" class="dd dd_container">
<ul class="dd_deploy">
<li>more options -->
<ul class="dd">
<li>el1</li>
<li>el2</li>
<li>el3</li>
</ul>
</li>
</ul>
<div class="cb"></div>
Less markup is better
View the full jsfiddle.
I want to allow liitems to have the same width but different height that may include images and text. the problem is when i float left, or display:inline-block, and one of the item exceeds the height. It disturbs the visual style of the content. Is there any way where i can manage this?
I want the li to follow a simple rule as
li {
float:left;
display:list-item;
width:200px;
background:#CCC;
height:auto;
padding:10px;
margin:0 10px 10px 0;
}
The example website which includes the same is
Genny Website
Sites like genny.com and pinterest.com do NOT float their elements, but rather position them absolutely and set their left and top values dynamically through JS. First, they grab the count of elements on the page. Second, they sniff the height and width of the elements. Third, they change the left and top CSS values.
+1 for the Masonry answer, I just wanted to explain how it works.
jQuery Masonry will be what you're looking for here, by nature the li's will never really bump up to the one above them without some less-than desirable code, but that jQuery plugin makes it very simple.
I think you would need to create three columns. something like:
<ul id="first column">
<li>Some content</li>
<li>Some content</li>
. . .
</ul>
<ul id="second column">
<li>Some content</li>
<li>Some content</li>
. . .
</ul>
<ul id="third column">
<li>Some content</li>
<li>Some content</li>
. . .
</ul>
Then you shouldn't have to float the li tags.
<div id="menu">
<ul><li>SocialSpot</li>
<li>Profile</li>
<li>Latest</li>
<li>Settings</li>
<li>Logout</li>
</div>
</ul>
I have this in a webpage. I have css aligning them. However I want the logout button to be aligned to the right but on the same bar. How can I do this without having them all aligned to the right?
CSS:
ul { overflow:auto; }
li { float:left; }
li:last-child { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/
Btw the :last-child pseudo-class does not work in IE8 (and below). If you want it to work in those browsers, you will have to assign a class (e.g. right) to the Logout LI item, and then:
li.right { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/1/
You might want float: right on the css for the logout link.
Like this? http://jsfiddle.net/QAjkP/
You can use an id tag to specify the css properties for that one <li> item
I have several block a elements that I want to be side-by-side to create a menu. The width of each is set to auto to accommodate the text inside. Each a element is displayed as a table cell and can work with either absolute or relative positioning.
Thanks for any help.
Mike
If you float block elements, they'll be placed in a horizontal row (with dynamic widths unless you specify a fixed one.)
ul#navigation li {
float: left;
}
Have a look at the HTML for the navigation on this page, for example (Questions, Tags, Users, ...)
display:inline-block
This is an almost similar scenario which you can consider using for creating a menu.
I would have gone with display:inline-block for generic side-by-side display but you're trying to do a horizontal nav. I wouldn't use the table cell display as it's quirky and you'll end up having to clean up other bugs.
Html:
#navigation{
width:550px;
margin:0;
padding:0;
list-style-type:none;
overflow:hidden;
}
#navigation li{
float:left;
}
#navigation li a,#navigation li a:hover{
display:block;
padding:4px 21px 4px 20px;
text-decoration:none;
}
<ul id="navigation">
<li >Some link</li>
<li >Some link 2</li>
<li >Some link three</li>
</ul>