CSS πρόβλημα

[Uberalles_gr]

Καλημέρα σε όλους,

 

έχω τον παρακάτω κώδικα:

<div id="frame-third">
		<div id="shell">
			<div id="title-holder"><span class="section-title">Τελευταία Νέα</span></div>
			<div id="content">
				<h2><a href="#">Τί είναι το Lorem Ipsum;</a></h2>
				<p class="left">
					<a title="Τί είναι το Lorem Ipsum;" data-lightbox="example-set" href="#" class="example-image-link">
						<img border="0" align="left" class="example-image article-photo" title="Τί είναι το Lorem Ipsum;" alt="Τί είναι το Lorem Ipsum;" src="images/logo/logo_origin.jpg">
					</a>
				</p>
				<p class="right">Το Lorem Ipsum είναι απλά ένα κείμενο χωρίς νόημα για τους επαγγελματίες της τυπογραφίας και στοιχειοθεσίας. Το Lorem Ipsum είναι το επαγγελματικό πρότυπο όσον αφορά το κείμενο χωρίς νόημα, από τον 15ο αιώνα, όταν ένας ανώνυμος τυπογράφος πήρε ένα δοκίμιο και ανακάτεψε τις λέξεις για να δημιουργήσει ένα δείγμα βιβλίου...
					<a href="#" class="read-more">Περισσότερα</a>
				</p>
			</div>
			
			<div id="content">
				<h2><a href="#">Από που προέρχεται;</a></h2>
				<p class="left">
					<a title="Από που προέρχεται;" data-lightbox="example-set" href="#" class="example-image-link">
						<img border="0" align="left" class="example-image article-photo" title="Από που προέρχεται;" alt="Από που προέρχεται;" src="images/logo/logo_origin.jpg">
					</a>
				</p>
				<p class="right">Αντίθετα με αυτό που θεωρεί η πλειοψηφία, το Lorem Ipsum δεν είναι απλά ένα τυχαίο κείμενο. Οι ρίζες του βρίσκονται σε ένα κείμενο Λατινικής λογοτεχνίας του 45 π.Χ., φτάνοντας την ηλικία του πάνω από 2000 έτη...
					<a href="#" class="read-more">Περισσότερα</a>
				</p>
			</div>

			<div id="content">
				<h2><a href="#">Γιατί το χρησιμοποιούμε;</a></h2>
				<p class="left">
					<a title="Γιατί το χρησιμοποιούμε;" data-lightbox="example-set" href="#" class="example-image-link">
						<img border="0" align="left" class="example-image article-photo" title="Γιατί το χρησιμοποιούμε;" alt="Γιατί το χρησιμοποιούμε;" src="images/logo/logo_origin.jpg">
					</a>
				</p>
				<p class="right">Είναι πλέον κοινά παραδεκτό ότι ένας αναγνώστης αποσπάται από το περιεχόμενο που διαβάζει, όταν εξετάζει τη διαμόρφωση μίας σελίδας. Η ουσία της χρήσης του Lorem Ipsum είναι ότι έχει λίγο-πολύ μία ομαλή κατανομή γραμμάτων, αντίθετα με το να βάλει κανείς κείμενο όπως 'Εδώ θα μπει κείμενο, εδώ θα μπει κείμενο', κάνοντάς το να φαίνεται σαν κανονικό κείμενο...
					<a href="#" class="read-more">Περισσότερα</a>
				</p>
			</div>
			
			<div id="content">
				<h2><a href="#">Που μπορώ να βρω μερικές;</a></h2>
				<p class="left">
					<a title="Που μπορώ να βρω μερικές;" data-lightbox="example-set" href="#" class="example-image-link">
						<img border="0" align="left" class="example-image article-photo" title="Που μπορώ να βρω μερικές;" alt="Που μπορώ να βρω μερικές;" src="images/logo/logo_origin.jpg">
					</a>
				</p>
				<p class="right">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που δεν γίνονται καν πιστευτές. Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο...
					<a href="#" class="read-more">Περισσότερα</a>
				</p>
			</div>
			
			<div id="content">
				<h2><a href="#">Που μπορώ να βρω μερικές;</a></h2>
				<p class="left">
					<a title="Που μπορώ να βρω μερικές;" data-lightbox="example-set" href="#" class="example-image-link">
						<img border="0" align="left" class="example-image article-photo" title="Που μπορώ να βρω μερικές;" alt="Που μπορώ να βρω μερικές;" src="images/logo/logo_origin.jpg">
					</a>
				</p>
				<p class="right">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που δεν γίνονται καν πιστευτές. Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο...
					<a href="#" class="read-more">Περισσότερα</a>
				</p>
			</div>
			
			<div id="content">
				<h2><a href="#">Που μπορώ να βρω μερικές;</a></h2>
				<p class="left">
					<a title="Που μπορώ να βρω μερικές;" data-lightbox="example-set" href="#" class="example-image-link">
						<img border="0" align="left" class="example-image article-photo" title="Που μπορώ να βρω μερικές;" alt="Που μπορώ να βρω μερικές;" src="images/logo/logo_origin.jpg">
					</a>
				</p>
				<p class="right">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που δεν γίνονται καν πιστευτές. Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο...
					<a href="#" class="read-more">Περισσότερα</a>
				</p>
			</div>
			
		</div>
	</div>

και ο κώδικας του CSS είναι:

#shell {
    margin: 16px auto 0;
    max-width: 1180px;
    width: 100%;
}

#frame-third #content {
    color: #666;
    float: left;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 4%;
    overflow: hidden;
    padding-bottom: 0;
    padding-top: 0;
    width: 46%;
}

και μου σπάει το 3o div γιατί από ότι έχω δει έχει λίγο κείμενο το 2ο div.

 

Μπορεί να με βοηθήσει κάποιος; Θέλω να έχω 2 div σε κάθε γραμμή ανεξάρτητα από το μέγεθος του κειμένου.

 

Ευχαριστώ,

Βασίλης.

[dios231]

είναι πολύ κλασικό πρόβλημα και είναι κάτι που διορθώνεται εύκολα ( δυστυχώς αυτή τι στιγμή δεν θυμάμαι το rule).

 

Πάντως θα σου πρότεινα να αρχίσεις να χρησιμοποιείς flexbox αντί για float.

[SpirosLouis]

Το id="content" το χρησιμοποιείς πολλές φορές...θα έπρεπε να είναι κλάση και όχι μοναδικό αναγνωριστικό.

 

Φτιάξε εδώ έναν κώδικα με το πρόβλημα για να μπορούμε να σε βοηθήσουμε ποιο εύκολα. https://jsfiddle.net/

[lionheart82]

Μπορείς να βγάλεις το float και να παιξεις με το display: inline-table; εναλακτικά...

EDIT: Ή να παιξεις με το min-height:200px ίσως όπως είσαι και ναι το id πρέπει να γινει class, μπορει να υπάρχει μονο ενα id μεσα στην σελίδα και πολλα ίδια classes.

[parsifal]

Όπως το βλέπω, πρέπει να ορίσεις κατ' ελάχιστον ένα row system.

 

Εναλλακτικά, χρησιμοποιείς ένα από τα πολλά έτοιμα grid systems που υπάρχουν.

[Uberalles_gr]

Το έβαλα στο fiddle για να έχετε μια καλύτερη εικόνα

[paparovic]

https://jsfiddle.net/c6ru70vj/

 

Έβαλα height στο .content . Δεν είναι η λύση για κάθε χρήση αλλα πιθανώς ταιριάζει για την δική σου. Για τέλεια κατάσταση, η καλύτερη λύση (χωρίς framework) είναι αυτή την στιγμή είναι το flexbox και μελλοντικά το css grid.

[Uberalles_gr]

Όχι δεν μου αρέσει το height και δεν παίζει και σωστά εάν υπάρχει μεγάλο κείμενο.

 

Κάποια άλλη πρόταση;

[Predatorkill]

Uberalles προσπαθεις να ανακυλυψεις το τροχο μονος σου. Με τις λυσεις που δινουν τα παιδια θα λυσεις το προβλημα αμεσα αλλα και τυχον μελλοντικα προβληματα!

[SlackulatoR]

Το margin-right στο χαλάει στο .content σε συνδυασμό με το max-width του shell.

 

https://jsfiddle.net/n3fdkwc8/6/

 

Με αυτόν τον τρόπο βέβαια όταν μικραίνεις το παράθυρο το περιεχόμενο στα δεξιά πάει από κάτω (που νομίζω είναι και πιο σωστό για responsive).

 

https://jsfiddle.net/n3fdkwc8/8/ - εδώ έχεις 2 columns αλλά δεν έβαλα margin.

[Uberalles_gr]

Uberalles προσπαθεις να ανακυλυψεις το τροχο μονος σου. Με τις λυσεις που δινουν τα παιδια θα λυσεις το προβλημα αμεσα αλλα και τυχον μελλοντικα προβληματα!

Δεν ξέρω γιατί λες ότι προσπαθώ να ανακαλύψω τον τροχό... Ένα απλό παράδειγμα ζήτησα... Τεσπα

 

Σε ευχαριστώ SlackulatoR! Παίζει ακριβώς όπως θέλω. Το έκανα με 3 στήλες εντέλει

[dominotrix]

Δεν ξέρω γιατί λες ότι προσπαθώ να ανακαλύψω τον τροχό... Ένα απλό παράδειγμα ζήτησα... Τεσπα

 

Σε ευχαριστώ SlackulatoR! Παίζει ακριβώς όπως θέλω. Το έκανα με 3 στήλες εντέλει

 

Αν ηξερες γιατι το λεει προφανως και δε θα απορουσες! Στην ουσια ολοι σου λενε να χρησιμοποιησεις σωστα ενα εργαλειο - εσυ αρνουμενος ομως να το κανεις, ψαχνοντας απλα την αμεση λυση. Το προβλημα που αντιμετωπιζεις (ή αντιμετωπιζες μιας και το ελυσες) μπορει να λυθει με 10 τροπους. Καποιοι απο αυτους θα σε βοηθησουν οχι μονο να το κανεις σωστα, αλλα να μαθεις και κατι καινουριο που ισως σε βοηθησει αργοτερα σε ενα αλλο προβλημα που τυχον προκυψει. Εν τελει, δικη σου ειναι η αποφαση. Καμια φορα ομως ειναι καλο να μαθαινεις μεσα απο ενα προβλημα - οχι απλα να παιρνεις την ευκολη λυση.

[_filippos_]

[Uberalles_gr]

Δεν διαφανώ dominotrix σε αυτά που λες και ούτε ποτέ αρνήθηκα κάποια πρόταση ούτε αμφισβήτησα κάποια από τις προτάσεις των παιδιών.

 

Από την άλλη δεν νομίζω ότι ανακάλυψα τον τροχό, αλλάζοντας ουσιαστικά 2 γραμμές στο CSS για να παίξει αυτό που είχα φτιάξει.

 

Την επόμενη φορά θα χρησιμοποιήσω αυτά που μου πρότειναν όλοι εδώ στο topic

 

Ευχαριστώ παιδιά για τον χρόνο σας και πάντα καλοδεχούμενες οι συμβουλές σας.

[quent-o]

.content{

1. min-height: 291px;
   

}

 

για το ποσα px θα ειναι το min-height το κοιτας.

 

γενικά να αποφεύγεις το καρφοτό height γιατί μπορεί να κάνει overflow