Here's my problem if I don't use a <br> after <hr> my image goes away like this:
So I added the <br>, and now I have this result:
I used some margin to reduce the size of the blank space, but I'd like to be close such as this result I designed:
Here's my HTML code:
.articleactu {
grid-column: 1 / -1;
grid-gap: 36px;
display: grid;
grid-template-columns: 190px auto;
flex-direction: column;
}
.articleactu img {
border-radius: 15px;
max-width: 200px;
}
p {
word-wrap: break-word;
max-width: 650px;
}
p1 {
line-height: 30px;
font-weight: bold;
}
p2 {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
margin-top: -10px;
width: 480%;
opacity: 12%;
}
<img src="images/vanguard.jpeg" alt="Article GTA " class="center">
<div>
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
<br>
<img src="images/marvel.jpg" alt="Article GTA " class="center">
<div>
<p1>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p1>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
Thanks in advance for your help !
One approach is as follows, though bear in mind I've taken the liberty of replacing the non-standard HTML elements, <p1> and <p2>, replacing them with the valid <p> element:
/* a simple reset, in order to ensure all elements have
the same defaults: */
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
/* we're using CSS flex-box layout: */
display: flex;
/* we want the content to wrap, as the <img> and
<div>, containing the text, are visually adjacent,
but we want the content to appear in a vertical
orientation: */
flex-wrap: wrap;
width: 90vw;
margin: 0 auto;
/* defining a visual separation between elements: */
gap: 1em;
}
.wrapper img {
/* defining the width of the <img> element: */
width: 200px;
/* along with setting that <img> to fully-cover
its available dimension in the layout: */
object-fit: cover;
}
/* defining styles for <img> elements that aren't
successfully loaded */
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
/* here we style the <div> elements that follow the <img>
elements: */
.wrapper img + div {
/* we set the <div> to allow it to grow to occupy space available: */
flex-grow: 1;
/* we set the flex-basis to 50% in order that, when the element
occupies 50% of the available space, the layout shifts to
occupy two rows, with the <img> above the <div>: */
flex-basis: 50%;
}
hr.solid {
/* the <hr> is a flex-item, and here we use the flex
shorthand to set the flex-grow, flex-shrink and
flex-basis properties, to allow it to grow, not allow
it to shrink and set its width as 100%: */
flex: 1 0 100%;
height: 3px;
background-color: currentColor;
}
/* assuming that you don't want a trailing <hr> element at the
end of the list of articles; if you do this can be removed: */
hr:last-child {
display: none;
}
<!-- the following '.wrapper' element is added to contain the list of elements you're
showing, though if no parent element exists the CSS could be applied to the <body>
element instead: -->
<div class="wrapper">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<div>
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<div>
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
</div>
This is easier to layout, though, if you wrap the <img> element inside the <div> with the text content and then use CSS grid to style that <div>:
/* simple reset: */
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
/* because related elements - the <img> and the text - are
all contained within the same descendant element, we can
use flex-direction to force the content into a vertical
orientation: */
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
/* I applied a class-name to easily access and style the <div>
elements that contain the content: */
div.card {
/* here we use CSS grid layout, which allows for a two-
dimensional layout of the contents: */
display: grid;
/* defining the vertical, and horizontal, gaps between
adjacent tracks (columns/rows): */
gap: 0.5em 1em;
/* defining the named grid areas, here we define three
rows of content, each row with two named columns: */
grid-template-areas:
"img title"
"img content"
"img release-date";
/* we then define the widths of those columns; the first
named 'img' is 200px wide, and the second is as wide
as possible to occupy the remaining space once the
width of the 'img' column is removed: */
grid-template-columns: 200px 1fr;
}
.wrapper img {
/* we specified already that the 'img' area is 200px in
width; here specify that the <img> should fill the
available space (without distorting the aspect-ratio): */
object-fit: cover;
/* we place the <img> element in the 'img' area of the
containing grid: */
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
hr.solid {
height: 3px;
background-color: currentColor;
}
hr.solid:last-child {
display: none;
}
<div class="wrapper">
<!-- applying a somewhat meaningful class-name to the <div> element(s) which
contain the content: -->
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
</div>
Of course, the above can be further simplified by removing the <hr> elements, and instead using CSS generated content to create the separators:
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
div.card {
display: grid;
gap: 0.5em 1em;
grid-template-areas:
"img title"
"img content"
"img release-date"
/* a grid-item will only occupy one track (row/column) by
default, so here we add a two-column grid-area named 'hr'
for the psuedo-<hr> to occupy: */
"hr hr";
grid-template-columns: 200px 1fr;
}
/* we use the ::after pseudo-element to create the visual line: */
div.card::after {
background-color: currentColor;
/* for a pseudo-element to be rendered the content, even if
only an empty string, must be set: */
content: '';
/* we place the element - rendered as a grid-item - into the
'hr' grid-area: */
grid-area: hr;
height: 3px;
/* we add a margin-top to adjust the spacing of the pseudo-
element, so it's visually centred between the adjacent cards: */
margin-top: 0.5em;
}
.wrapper img {
object-fit: cover;
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
<div class="wrapper">
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
</div>
Assuming that you don't want the trailing pseudo-element to create a line at the end of the content a further refinement can be used; here we use the :not() negation operator to refine the selector so that we select all ::after pseudo-elements of all div.card elements that are not the :last-child of their parent:
div.card:not(:last-child)::after {
background-color: currentColor;
content: '';
grid-area: hr;
height: 3px;
margin-top: 0.5em;
}
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
div.card {
display: grid;
gap: 0.5em 1em;
grid-template-areas:
"img title"
"img content"
"img release-date"
"hr hr";
grid-template-columns: 200px 1fr;
}
div.card:not(:last-child)::after {
background-color: currentColor;
content: '';
grid-area: hr;
height: 3px;
margin-top: 0.5em;
}
.wrapper img {
object-fit: cover;
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
<div class="wrapper">
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
</div>
I'd also, in closing, recommend that you use more semantic means to wrap the text-content; it looks like you have content such as a title, article text and a release date? If so, I'd personally – and this is highly subjective – update the HTML to the following:
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
div.card {
display: grid;
gap: 0.5em 1em;
grid-template-areas:
"img title"
"img content"
"img release-date"
"hr hr";
grid-template-columns: 200px 1fr;
}
div.card:not(:last-child)::after {
background-color: currentColor;
content: '';
grid-area: hr;
height: 3px;
margin-top: 0.5em;
}
.card h2.title {
color: #050;
font-size: 1.2rem;
font-weight: bold;
}
/* here we select all ::before pseudo-elements of
all <time> elements that have a 'data-prefix'
custom attribute: */
time[data-prefix]::before {
/* setting the content to be equal to the value of
the 'data-prefix' attribute, using the attr()
function, and adding a string to follow that
attribute-value: */
content: attr(data-prefix) ': ';
font-weight: bold;
}
.wrapper img {
object-fit: cover;
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
<div class="wrapper">
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<!-- a page should have a <h1> element to title the page or document; here I use a
<h2> element (though any other type of heading element could be used) as it's
hierarchically/semantically less important than the page-title; if the cards
appear in a section that itself has a heading, this element should be titled
with a lower-significance heading, <h3>, <h4>... -->
<h2 class="title">CALL OF DUTY : VANGUARD : Est-il bon ?</h2>
<p>Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<!-- in order to make the date of release (arguably) accessible to user-agents that
can parse such information I chose to use a <time> element with the datatime
attribute set to the referenced date: -->
<time class="release-date" datetime="2021-11-25" data-prefix="Publié le">25 novembre 2021 </time>
</div>
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<h2 class="title">MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</h2>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<time class="release-date" datetime="2021-11-25" data-prefix="Publié le">25 novembre 2021 </time>
</div>
</div>
References:
CSS:
Adjacent-sibling combinator (+).
attr().
content.
display.
flex (shorthand).
:last-child.
:not().
object-fit.
Pseudo-elements.
HTML:
<time>.
<h2>.
Bibliography:
"Basic concepts of flexbox."
"CSS Grid Layout."
"<h1>–<h6>: The HTML Section Heading Elements."
You should always post working code. At the very least I assume you forgot to add the <div class="articleactu">.
Also p1 and p2 are not valid HTML elements. If you want to style them differently, use a valid element (such as p) and classes.
Your problem is that you forgot that the <hr> elements also are included in the grid.
The elements inside the grid, are distributed (by default) from the top left, row by row. Without the <br> something like this:
+-------+-------+
| img | div |
+-------+-------+
| hr | img |
+-------+-------+
| div | |
+-------+-------+
By adding the <br> you are adding an element that is then placed into the second column:
+-------+-------+
| img | div |
+-------+-------+
| hr | br |
+-------+-------+
| img | div |
+-------+-------+
However now the <hr> only covers the first column which you try to compensate with the width.
Instead you need to tell the hr, to cover two columns like this:
+-------+-------+
| img | div |
+-------+-------+
| hr |
+-------+-------+
| img | div |
+-------+-------+
This can be done, for example with the grid-columns property and the span keyword:
hr.solid {
grid-column: span 2;
with: 100%
opacity: 12%;
}
The width is needed, because as a grid element the <hr> looses it default width. Also remove the negative margin.
The large gap around the <hr> is due to grid-gap: 36px with applies to vertical and horizontal gaps. To reduce the distance around the <hr>, set a separate value for the horizontal gaps:
grid-gap: 0 36px;
For a complete example look at https://jsfiddle.net/3qywz8e7/1/
BTW, you should learn to use the developer tools of your browser. They have tools built in to help you visualize the grid. For example in Chrome: https://developer.chrome.com/docs/devtools/css/grid/
Here is a flexbox sample of your code and need some change, good luck.
.flex-container {
display: flex;
flex-direction: column;
align-content: flex-start;
height: 100%;
padding: 15px;
gap: 5px;
}
.flex-container > div{
border-radius: 5px;
padding: 8px;
}
.articleactu {
grid-column: 1 / -1;
grid-gap: 36px;
}
.articleactu img {
border-radius: 15px;
max-width: 200px;
}
p {
word-wrap: break-word;
max-width: 650px;
}
p1 {
line-height: 30px;
font-weight: bold;
}
p2 {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
margin : 10px auto 10px auto;
width: 100%;
opacity: 12%;
}
<div class="flex-container">
<div>
<img src="https://via.placeholder.com/250" alt="Article GTA " class="center">
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
<div>
<img src="https://via.placeholder.com/250" alt="Article GTA " class="center">
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
</div>
I have a box with an image at the right-side and text at the left-side. The box should have a white background. At smaller screens the text goes below the image which is good.
A few px above the bottom of the box I want to have a button.
Think I should do that by using position relative for the box and position absolute for the button.
The CSS and HTML code is
.box {
background: white;
float: right;
position: relative
}
.space {
padding: 15px;
}
.button {
vertical-align: middle;
position: absolute;
bottom: 40px;
margin-left: 15px;
}
<div class="box">
<img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
<h2 class="space">Amsterdam</h2>
<p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
<a class="button" href="https://www.buienradar.nl">Slecht weer</a>
<hr>
</div>
Problem is that on smaller screen the text is displayed over the button. Another issue is that padding of the text does not prevent it getting connected to image (laptop/desktop). I do not want to add margin-left to picture because I want the line <hr>to be connected to the image.
The button is over the text because you have used position:absolute to the button.
Set position:relative and bottom:auto in the smaller screen using media query rule...
Also using vertical-align: middle; in the absolute positioned elements will do nothing...so better to remove it
Stack Snippet
.box {
background: white;
float: right;
position: relative
}
.space {
padding: 15px;
}
img {
max-width: 100%;
}
.button {
position: absolute;
bottom: 40px;
margin-left: 15px;
}
#media (max-width:768px) {
.button {
position: relative;
bottom: auto;
margin-left: 15px;
}
}
<div class="box">
<img class="box" src="https://d2f0ora2gkri0g.cloudfront.net/e4/16/e4164876-1967-4303-9a57-aae00eb2b22b.png" alt="oproeien" style="margin-right:0px; margin-left:0px">
<h2 class="space">Amsterdam</h2>
<p class="space">Amsterdam is de (titulaire) hoofdstad en naar inwonertal de grooteeuw tot stadsuitbreidingen, waaronder de laatste grachten van de fortificatie die nu als grachtengordel bekend is en in 2010 is toegevoegd aan de UNESCO-Werelderfgoedlijst.</p>
<a class="button" href="https://www.buienradar.nl">Slecht weer</a>
<hr>
</div>
Well, I searched a lot and everything that I find didn't work for me, like a curse, what I'm tryng to do is blur a background image when the person that is viewing the web page see the div, I started to make this page a short time ago, as soon as I started to try to learn CSS and JavaScript, so, what I've done is this:
html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> BIRL </title>
</head>
<body>
<div class="bg-img">
<br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center><div class="botao"><img src="play.png" class="playButton"></div></center>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
<div class="info">
<h1 class="titles">Quem nós Somos?</h1>
<a class="macaco">Nós somos uma empresa totalmente responsável e profisisonal inclinada a satisfação de nossa clientela
Nossos produtos sempre foram, são, e sempre serão destinados a nossos clientes, (salve ronildo)</a>
<h1 class="titles">Qual é a nossa missão na terra?</h1>
<a class="macaco">Nossa missão é proporcionar a melhor qualidade de entreterimento sadio para a sua família e amigos afins,
todos os nossos jogos possuem uma qualidade exemplar e classificação livre, ou seje, eles podem ser jogados por qualquer pessoa
em qualquer idade e qualquer lugar do mundo, nós nunca utilizaremos palavras de baixo calão em nossas obras eletrônicas, isto
é um exemplo para os seus filhos.</a>
</div>
</div>
</body>
</html>
css:
#font-face {
font-family: LemonMilk;
src: url(LemonMilk.otf);
}
.playButton {
width: 55%;
height: 40%;
z-index:2;
}
.game {
width: 100%;
height: 100%;
}
body {
background:url('background.jpg') no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.botao {
float: rigth;
width: 100%;
height: 100%;
vertical-align: middle;
z-index:2;
}
.info::before {
display: block;
width: 100%;
height: 100%;
background: url('background-blurred.jpg');
background-size: cover;
content: '';
opacity: 1;
}
.info {
background-color: #FFFFFF;
font-family: LemonMilk, Verdana, Tahoma;
padding: 70px;
text-align: justify;
}
.titles {
color: #000000;
text-align: center;
z-index: 1;
}
.macaco {
color: #000000;
}
I want to make something like this: http://jordanhollinger.com/media/bmu-landing.png
Here you go: How to apply a CSS 3 blur filter to a background image
Now, there is typo float: rigth. Also, there are a lot of unnecessary things in your code, but you are beginner. Keep practicing and everything will fall in its place eventually!
And, it is hard to decipher what you want exactly.
" what I'm tryng to do is blur a background image when the person that is viewing the web page see the div,"
Do you mean, when DIV with the picture is visible?
I have a floated div that has a 200px margin from the right side, and I want to place a table on that empty space.
This is the CSS for the div:
#testo {
border-right: solid black 1px;
background-color: white;
margin-right: 200px;
text-align: justify;
padding: 7px;
float: left;
font-size: 14px;
}
But the table goes under it? Why?
The problem is that the margin of your floating element still takes up space. Therefore, another element in the flow cannot be in that space and gets pushed to the next line.
One solution is to absolutely position the table on the right so that it's removed from the flow.
#wrapper {
position: relative;
}
#wrapper div {
margin-right: 200px;
float: left;
}
table {
position: absolute;
top: 1em;
right: 0;
width: 190px;
border: 1px solid;
}
<div id="wrapper">
<div>Uno Dos Tres Quatro Cinco no Dos Tres Quatro Cinco no Dos Tres Quatro Cinco. Iti ni san shi, Iti ni san shi. Un deux trois quatre. Un deux trois quatre. Um dois três quatro. Um dois três quatro. Uno Dos Tres Quatro Cinco no Dos Tres Quatro Cinco no
Dos Tres Quatro Cinco. Iti ni san shi, Iti ni san shi. Un deux trois quatre. Un deux trois quatre. Um dois três quatro. Um dois três quatro</div>
<table>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>World</td>
</tr>
</table>
</div>
Because your div has an 100% width.
Set a width/max-width to this div and the table won't go under.
It is happening because the div has a display: block by default.
Regardless its size, it will take the full line on the page.
Try to set display:inline-block to the div and see if it works.
I've got a contact form setup, with DIV's. The issue I have is when the text within the DIV overlaps, it doesnt sit in line.
My HTML and CSS are as follows (HTML First)
<div class="form_label"><span class="number">7.</span> ¿tienen almacenes de existencias significativos al cierre en ubicaciones diferentes a donde se encuentra la entidad?</div>
CSS...
.form_label {
clear: left;
float: left;
font-size: 10pt;
margin-bottom: 5px;
margin-left: 1px;
padding-top: 0;
width: 553px;
}
.number {font-weight: bold;}
I have a feeling its a text-align issue. Any help appreciated!!
You could use a table...Or:
<div class="form_label">
<div class="number">7.</div>
<div class="content">¿tienen almacenes de existencias significativos al cierre en ubicaciones diferentes a donde se encuentra la entidad?</div></div>
With CSS:
.number {font-weight: bold; display:inline; width:23px; vertical-align: top;}
.content {
display:inline-block;
width: 530px;
}
Try using a span as the outer container if you want it all in-line
Try:
Edit: Forgot to add the <ol> tag. The value attribute doesn't work without it.
<ol>
<li value="7">¿tienen almacenes de existencias significativos al cierre en ubicaciones diferentes a donde se encuentra la entidad?
</ol>
You can modify the width property in class form_label and put it to 622px;
Usually, to keep a text in one line, you have to add white-space: nowrap.
In your case, apparently the div hasn't enough room to contain the text: http://jsfiddle.net/PyDAF/
Either you have to shorten text (if you still want width: 553px), or increase the .form-label witdh value.