I have some DIVs with contents inside. I want to display them side by side and if there is no space, I want to break the whole div, so the contents don't go to a new line alone.
I've made this example of what happens.
Here is a screenshot from the link above.
csspos http://img709.imageshack.us/img709/6799/csswo.png
And here is the expected output
cssposright http://img826.imageshack.us/img826/8530/csse.png
How about http://jsfiddle.net/qB225/15/? That adds
.item {
...
white-space: nowrap;
}
Put non-breaking space between your links and spans.
http://jsfiddle.net/qB225/22/
http://jsfiddle.net/qB225/21/
.master
{
width: 160px;
}
.item
{
display:inline-block;
font-size: 11px;
padding: 2px 2px 2px 0;
}
.item { display:inline; } /* DO NOT REMOVE, FOR IE */
.item a
{
text-transform: uppercase;
}
If you want them to only wrap as pairs you need to do two things. First change your html so that you group your item divs in pairs of two:
<div class="master">
<div>
<div class="item">
Text
<span>(10)</span>
</div>
<div class="item">
Text
<span>(10)</span>
</div>
</div>
<div>
<div class="item">
Text
<span>(10)</span>
</div>
<div class="item">
Text
<span>(10)</span>
</div>
</div>
</div>
And then add a float to the grouping divs:
.master > div{ float:left; }
Try using "inline-block" as follows:
.item
{
display: inline-block;
font-size: 11px;
padding: 2px 2px 2px 0;
}
Thanks.
Related
This is pretty basic CSS question. I have this as my result:
I want the name and date to be on a single line next to the menu icon
HTML:
<div class="topnav">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
<div class="topline">
<div id="name">John Doe</div>
<div id="date">04/27/2018</div></div>
</div>
CSS:
.topnav{
background-color: #3071a9;
color: #ffffff;
}
.topline{
padding-left: 20px;
}
#name {
float:left;
}
#date {
float:left;
}
add to your CSS :
.topline{
display: inline-block;
}
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
This needs to be made into a div and floated left like your name and date are. You also need topnav to be of the right width (whether it's fixed or not) for everything to fit inside, otherwise it'll be pushed down.
<div style="font-size:30px;cursor:pointer;float:left;" onclick="openNav()">☰</div>
You could keep it a span by using display:inline or inline-block, but since you're floating the other divs, might as well keep it consistent. Display in CSS
Stop all the floating! Use flexbox instead:
.topnav {
display: flex;
align-items: center;
background-color: #3071a9;
color: #ffffff;
}
#name,
#date {
margin-left: 20px;
}
<div class="topnav">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
<div id="name">John Doe</div>
<div id="date">04/27/2018</div>
</div>
</div>
I've got two divs and would like to align their baselines. However, one of the divs has more than one line of text and some embedded content, and while I'd like to align them to the top baselines, the browser seems to align to the bottom one.
I've built a JSFiddle here to illustrate, with the following HTML:
<div style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
and CSS:
.embedded {
width:40px;
height:40px;
display:inline-block;
vertical-align:-15px;
border:1px solid black;
}
What I'd like is this:
What I get is this:
A pure-CSS solution would be nice, but I'm not against using JavaScript here either. Any help would be greatly appreciated!
You can do it quite simply with a wrapping div and a bit of flex box.
.wrapper {
display: flex;
align-items: baseline;
}
.note {
margin-right: 1ch;
}
.embedded {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: -15px;
border: 1px solid black;
}
<div class="wrapper">
<div class="note" style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
</div>
This will solve your issue:
`<div style="display: flex;">
<div style="padding-top: 13px;">NOTE: </div>
<div>
<p style="display:inline">
Here's
<span class='embedded'></span>
an embedded div
<br/>
and more text
</p>
</div>
</div>`
Link : JSFiddle
I'm trying to add a subtitle below the title on my page. I've got an image to the left of the existing title, and the title is centered to the middle of the image. I'm trying to add a subtitle in a smaller font below the title and I can't seem to figure it out. The code I'm using is like so:
<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="clear"></div>
</div>
</div>
</div>
.container {
display:table;
width:100%;
height:auto;
background-color:#171717;
}
.container .text {
display:table-cell;
height:100%;
vertical-align:middle;
font: bold 70px Verdana;
color: #666666;
}
and here's what that looks like:
(I'm not including the code for the menu even though it's in the picture).
And what I'm trying to achieve is this:
Does anyone have any ideas?
You have a div.text which contains your title. Underneath that you need to place your subtitle. This code is called "html markup". You should use <h1> - <h6> tags for titles.
Here is an example (fiddle)
.header {
text-align: center;
}
.header img {
float: left;
}
.clear {
clear: both;
}
<div class="header">
<img src="http://dummyimage.com/100/000000/fff" />
<h1>Hello world</h1>
<h2>This is a subtitle</h2>
<div class="clear"></div>
</div>
Preview:
You can in fact do this with CSS.
div.text {
font-size: 32px;
font-weight: bold;
display: inline-block;
color: #fff;
vertical-align: top;
padding: 2px 1em;
}
div.text:after {
display: block;
text-align: center;
font-size: 20px;
margin-top: 1em;
content: "This is the subtitle";
}
.container {
background-color: #111;
display: inline-block;
}
.container img {
display: inline-block;
}
Now, whether you should do that with CSS is another question entirely. Content that's actually part of your page's message should be part of the page, not part of a style sheet.
Also, your "container" should probably be an <h1> tag. Also you don't need to close <img> tags, and self-closing tags are pointless in an HTML5 document (which yours may or may not be I suppose).
Try this:
<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="subtitle">My subtitle</div>
<div class="clear"></div>
</div>
</div>
</div>
.text {
margin-bottom: 0px;
padding-bottom: 0px;
}
.subtitle {
margin-top: 0px;
padding-top: 0px;
}
There's probably 100 different ways to do this... Here's one. In your line of text, just use a <br /> and a <span>
<div class="text">This is the Title<br /><span>The SubTitle would go here</span></div>
Then style your subtitle like so:
.container .text span {
/* Something styled here */
}
The html your using could be improved as it is not really appropriate.
Try something like this
<div class="header">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<h1>this is the title</h1>
<h3>This is the subtitle<h3>
</div>
.header{
overflow:hidden
}
.header img {
float:left;
}
.header{
text-align:center;
}
Thanks, #Sergio S. That worked for me. A more general way of doing this, based on Sergio's answer (is the following):
CSS:
.classofheadertext {
margin-bottom: 0px;
padding-bottom: 0px;
}
.classofsubtitletext {
margin-top: 0px;
padding-top: 0px;
}
Full credit once again to Sergio. I've just put this in simple form :D
Okay now, I've got kind of a big one.
I'm working off a base wireframe (attached) and I'm having trouble implementing this layout. Basically, we've got a container div that has several more divs inside of it. Each of the interior divs are the components of the product and all have the exact same structured content flow - an image, title of the product, and links to the documentation. In the wireframe there are 7 component divs displayed (one is kinda hidden under my MSPAINT).
Desired achievements
The title and links must float next to the image icon, regardless of font size/line-height of the text of either.
The title MUST stay on one line. It is not allowed to wrap.
The interior divs must line up next to each other until they don't fit anymore, then wrap to the next line.
I can dynamically load content into the container div, but that div needs to be able to handle differing numbers of components. When users select product type and version, the number of components can and will change.
What is known
Some component titles will be short (7-ish chars) some will be long (27-ish chars).
All icons will be roughly 50x50 px.
There will be, at most, 8-9 component divs for some selected products.
There will be, at fewest, 3 component divs for some selected products.
Things I've given up on
Fine, we can fix the width and height of the component divs, see if I care.
Multiple divs. Whatever. The component divs don't need to have more nested divs. I'm an idiot and that was foolishness (I'm sure the answer is a component div with only an image and 2 paragraph elements, with the image floating left).
The code I've developed is huge and ugly as I've tried and commented out many things. Here's a jsFiddle with some generic code that I think has a minimal amount of damage done to it.
HTML
<div id="container">
<div class="component" id="1">
<div class="icon">
<img src="img.png"></a>
</div>
<div class="title">
<p>Product Item #1</p>
</div>
<div class="links">
<p>HTML PDF</p>
</div>
</div>
<div class="component" id="2">
<div class="icon">
<img src="img.png"></a>
</div>
<div class="title">
<p>Product Item 2</p>
</div>
<div class="links">
<p>HTML PDF</p>
</div>
</div>
...
// More component divs here.
</div>
CSS
#container {
border: 1px solid red;
overflow: auto;
margin-left: auto;
margin-right: auto;
width: 900px;
}
.component {
border: 1px solid black;
margin: 3px;
overflow: auto;
float: left;
padding: 3px;
}
.icon {
float: left;
}
Thanks so much for your help!
Maybe I would have done something like this FIDDLE
Component structure:
<div class="component" id="1">
<img class="icon" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/SemiPD-icon.svg/50px-SemiPD-icon.svg.png">
<h1 class="title">Generic Product Name #1</h1>
<p class="links">
HTMLPDF
</p>
</div>
I made also some changes to the css part:
#container {
border: 1px solid red;
overflow: auto;
margin-left: auto;
margin-right: auto;
width: 600px;
padding-bottom: 3px;
}
.component {
border: 1px solid black;
margin-top: 3px;
margin-left: 3px;
overflow: auto;
float: left;
padding: 5px;
}
.title {
margin-left: 55px;
font-size: 1.0em;
font-weight: bold;
}
.links {
margin-left: 55px;
}
.icon {
float: left;
}
Is it possible to make a nested structure of divs
<div>Content1
<div>Content2
<div>Content3</div>
</div>
</div>
to look like divs with fixed width that float left?
<style>
div {
float: left;
width: 200px;
}
</style>
<div>Content1</div>
<div>Content2</div>
<div>Content3</div>
I guess you can't do it with CSS. It's a language for defining the style of elements, not for modifying their structure. You could think about jQuery or XSLT for your case.
you can use margin-top property to get this effect
<div style="width:100px;height:100px;border:1px solid black">
<div style="width:100px;height:100px;border:1px solid green;margin-top:100px">
</div?
</div?
Actually you don't need to do anything really, this is the default behavior for block level elements.
Try to create a blank html page and insert the lines
<div>Content1
<div>Content2
<div>Content3</div>
</div>
</div>
Without any form of styling the output will be:
Content1
Content2
Content3
Which is what you are asking for
I guess I figured how to do that with a bit of additional html and absolute positioning:
<div id="parent">
<div class="nest">
<div class="content">One</div>
<div class="nest">
<div class="content">Two</div>
<div class="nest">
<div class="content">Three</div>
</div>
</div>
</div>
</div>
//css:
#parent {
position: relative;
}
div.nest {
position:absolute;
width: 200px;
top: 0;
left: 200px; /*should be same as width */
/* the next is the tricky part */
margin: 0px;
padding: 0px;
border: 0px;
}
/* apply custom border, padding and margin here */
div.content {
border: 1px solid #ccc;
padding: 8px;
margin: 4px;
}
Color me noobish, but couldn't you achieve something similar with an unordered list, since you're looking to nest elements? (http://jsfiddle.net/xDJAY/) Not sure if this is the structure you're looking for though.